es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Usa Javascript para obtener la URL de la pestaña actual.

03 Jun, 2023 Programación

Estoy tratando de crear una extensión de Google que registre las URL de la pestaña actual y la anterior que visita un usuario. ¿Hay alguna manera de usar JavaScript para que la extensión de Chrome se ejecute en segundo plano, verifique la pestaña actual y devuelva la URL?

Mi HTML actual:

    <body>
        <div class=""container"">
            <h2> Pestaña Actual </h2>
            <div id=""current_url""> </div>
            <h2> Pestaña Anterior </h2>
            <div id=""previous_url""> </div>
        </div>
</body>

Intenté hacer esto:

document.getElementById("current_url").innerHTML = window.location.href;

pero no se actualiza cuando cambio a una nueva pestaña.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para tener una extensión de Google Chrome que lleve un registro de las URL de pestañas actual y previa visitadas por un usuario usando Javascript, puede usar la API chrome.tabs para escuchar los eventos de pestañas y actualizar el HTML con las URL actuales y previas. Aquí hay un ejemplo:

    1. En su archivo manifest.json, agregue el permiso “tabs”:
    {
    "name": "Mi Extensión",
    "version": "1.0",
    "manifest_version": 2,
    "permissions": [
        "tabs"
    ],
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"]
        }
    ]
}
    1. En su archivo content.js, agregue oyentes de eventos para los eventos de pestañas y envíe mensajes al script de fondo con las URL actuales y previas:
    chrome.tabs.onActivated.addListener(function(activeInfo) {
    chrome.tabs.get(activeInfo.tabId, function(tab) {
        chrome.runtime.sendMessage({type: "updateCurrentUrl", url: tab.url});
    });
});

chrome.tabs.onRemoved.addListener(function(tabId, removeInfo) {
    chrome.runtime.sendMessage({type: "updatePreviousUrl", url: removeInfo.url});
});

    Esto escucha cuando se activa una pestaña (cambiada) y envía un mensaje al script de fondo con la URL actual. También escucha cuando una pestaña se elimina (cerrada) y envía un mensaje con la URL anterior.

    1. En su archivo background.js, reciba los mensajes y actualice el HTML:
    var currentUrl = "";
var previousUrl = "";

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.type === "updateCurrentUrl") {
        previousUrl = currentUrl;
        currentUrl = request.url;
        updateHtml();
    } else if (request.type === "updatePreviousUrl") {
        previousUrl = request.url;
        updateHtml();
    }
});

function updateHtml() {
    document.getElementById("current_url").innerHTML = currentUrl;
    document.getElementById("previous_url").innerHTML = previousUrl;
}

    Esto recibe los mensajes del script de contenido y actualiza las variables de URL actuales y previas en consecuencia. También llama a la función updateHtml para actualizar el HTML con las nuevas URL.

    1. En su archivo popup.html, agregue el contenedor HTML para las URL actuales y previas:
    <body>
    <div class="container">
        <h2>Peestaña Actual</h2>
        <div id="current_url"></div>
        <h2>Pestaña Previas</h2>
        <div id="previous_url"></div>
    </div>
    <script src="popup.js"></script>
</body>
    1. En su archivo popup.js, agregue un oyente para cuando se abra el popup y envíe un mensaje al script de contenido para obtener la URL actual:
    document.addEventListener("DOMContentLoaded", function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {type: "getCurrentUrl"});
    });
});

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.type === "setCurrentUrl") {
        document.getElementById("current_url").innerHTML = request.url;
    }
});

    Esto obtiene la pestaña actualmente activa y envía un mensaje al script de contenido para obtener la URL actual. También escucha un mensaje del script de contenido con la URL actual y actualiza el HTML con ella.

    Con este código, su extensión de Google Chrome debería poder llevar un registro de las URL de pestañas actuales y previas visitadas por un usuario, incluso al cambiar entre pestañas.

Comments are closed.