重新加载选项卡（chrome 扩展）时如何运行此脚本？

Question

所以我想在指定 URL 中重新加载选项卡时运行脚本。它几乎可以工作，但实际上 id 没有:) 这是我的清单文件：

{
"manifest_version": 2,

"name": "Sample Extension",
"description": "Sample Chrome Extension",
"version": "1.0",

"content_scripts":
[
    {
      "matches": ["http://translate.google.hu/*"],
      "js": ["run.js"]
    }
],

"permissions":
[
    "activeTab",
    "tabs"
],

"browser_action":
{
    "default_title": "Sample",
    "default_icon": "icon.png"
}
}

这是run.js：

chrome.tabs.onUpdated.addListener(
function ( tabId, changeInfo, tab )
{
    if ( changeInfo.status === "complete" )
    {
        chrome.tabs.executeScript( null, {file: "program.js"} );
    }
}
);

programs.js 只是提醒一些文本（还）。当我对 run.js 的第一行发出警报时，它会发出警报，但是当我将它放入 if 时，它不会发出警报。我找不到问题。我是不是打错字了？

Answer 1

假设 http://translate.google.hu/* 页面是您希望在重新加载时注入代码的页面，您将不得不以稍微不同的方式进行处理。目前，您总是将代码注入这些页面（未经许可，不少于），然后尝试在该内容脚本中使用 chrome.tabs api，这是您无法做到的。相反，我们会将侦听器放在后台页面中，并且只在页面刷新时注入代码，就像你想要的那样。首先是清单：

{
  "manifest_version": 2,
  "name": "Sample Extension",
  "description": "Sample Chrome Extension",
  "version": "1.0",
  "background": {
    "scripts": ["background.js"]
  },
  "permissions":[
    "http://translate.google.hu/*", "tabs"
  ]
}

background.js

chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab){
  if (tab.url.indexOf("http://translate.google.hu/") > -1 && 
      changeInfo.url === undefined){
    chrome.tabs.executeScript(tabId, {file: "program.js"} );
  }
});

这将侦听onUpdated 事件，检查它是否是我们要注入的url 之一，然后检查页面是否已重新加载。最后一步是通过检查changeInfo.url 是否存在来完成的。如果是这样，那么这意味着 url 已更改，因此没有刷新。反之，如果它不存在，那么页面一定只是被刷新过。

Answer 2

content_scripts 在每个页面（重新）加载时运行，因此最好只使用它们来检测它。

这样，在您的 content_script 准备好接收任何消息之前，您也不会冒险在 background 中运行任何代码。

Answer 3

2021

如果您想检测清单 3（也可能是 2）中 background.js 的重新加载，chrome.tabs.onUpdated 方法对我不起作用：/它被调用了太多次。

这最终对我有用！

// --- On Reloading or Entering example.com --- 
chrome.webNavigation.onCommitted.addListener((details) => {
    if (["reload", "link", "typed", "generated"].includes(details.transitionType) &&
        details.url === "http://example.com/") {

        codeAfterReload();

        // If you want to run only when the reload finished (at least the DOM was loaded)
        chrome.webNavigation.onCompleted.addListener(function onComplete() {

            codeAfterReloadAndFinishSomeLoading();

            chrome.webNavigation.onCompleted.removeListener(onComplete);
        });
    }
});

更多转场类型：https://developer.chrome.com/docs/extensions/reference/history/#transition_types

祝你好运:)