您如何检测带有 chrome 扩展名的 url 中的变化？

Question

我正在学习制作 chrome 扩展。我运行遇到了一个问题，我想要运行，甚至只是 alert("test"); 的上下文脚本在未激活 onload 时无法执行。当您按后退箭头访问上次访问的页面时，也会发生这种情况。我注意到 url 发生了变化，但没有任何激活。我如何检测到这个？如果答案是服务人员，将不胜感激。

Answer 1

maifest 版本 2.0

尝试使用 chrome.tabs.onUpdated.addListener((id, change, tab)=>{})。每次 URL 更改时，这应该运行！这是一些代码的简约示例，当 URL 更改时将 js 注入站点。

background.js:

// inject code on change
chrome.tabs.onUpdated.addListener((id, change, tab) => {

    // inject js file called 'inject.js'
    chrome.tabs.executeScript(id, {
        file: 'inject.js'
    });
});

mainfest 版本 3.0

您可以使用 chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {}) 来完成。但是，当一个页面URL被改变时，这实际上会触发多次所以你需要在changeInfo变量中添加对URL的检查，所以它只触发一次！

manifest.json:

{
    "name": "URL change detector",
    "description": "detect a URL change in a tab, and inject a script to the page!",
    "version": "1.0",

    "manifest_version": 3,
    "permissions": [
        "scripting",
        "tabs"
    ],
    "host_permissions": [
        "http://*/*",
        "https://*/*"
    ],

    "background": {
        "service_worker": "background.js"
    }
}

background.js:

// function that injects code to a specific tab
function injectScript(tabId) {

    chrome.scripting.executeScript(
        {
            target: {tabId: tabId},
            files: ['inject.js'],
        }
    );

}

// adds a listener to tab change
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {

    // check for a URL in the changeInfo parameter (url is only added when it is changed)
    if (changeInfo.url) {
        
        // calls the inject function
        injectScript(tabId);

    }
});

inject.js:

// you can write the code here that you want to inject
alert('Hello world!');

您如何检测带有 chrome 扩展名的 url 中的变化？

How do you detect changes in url with a chrome extension?

html

javascript

google-chrome-extension

maifest 版本 2.0

mainfest 版本 3.0