chrome 扩展：页面完成加载 javascript 后运行脚本答案

【问题标题】：chrome extension: run script after page has finished loading javascriptchrome 扩展：页面完成加载 javascript 后运行脚本
【发布时间】：2014-07-11 02:11:40
【问题描述】：

当页面完成加载时，这根本不会触发。基本上，当我单击浏览器操作按钮时，它会触发它，并且在页面加载时，它将运行一个脚本。在我的 background.js 中

var toggle = false;
chrome.browserAction.onClicked.addListener(function(tab) {
  toggle = !toggle;

  if(toggle){
    chrome.browserAction.setIcon({path: "icons/logo.png", tabId:tab.id});
//    chrome.tabs.executeScript(tab.id, {file:"SCRIPT.user.js"});
    chrome.tabs.executeScript(tab.id, {code:"alert('aaxxxbbaa')"});
  }
  else{
    chrome.browserAction.setIcon({path: "icons/icon48.png", tabId:tab.id});
    chrome.tabs.executeScript(tab.id, {code:"alert('bbdxdb')"});
  }
});

var filter = {'url': [
  {hostSuffix: '*', pathPrefix: ''},
  {hostSuffix: '*', pathPrefix: ''}
]};


chrome.webNavigation.onDOMContentLoaded.addListener(function(tab){
    if (toggle)
        chrome.tabs.executeScript(tab.id,{code:"alert('loaded')"});
},filter);

我也尝试在清单中设置它

{
  "name": "Tool",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "Te",
  "homepage_url": "",
  "icons": {
    "16": "icons/logo.png",
    "48": "icons/logo.png",
    "128": "icons/logo.png"
  },
  "default_locale": "en",
  "background": {
    "page": "src/bg/background.html",
    "persistent": true
  },
  "browser_action": {
    "default_icon": "icons/logo.png",
    "default_title": "browser action demo"
  },
  "permissions": [
    "<all_urls>"
  ],
  "content_scripts": [
    {
      "run_at": "document_end",
      "matches": [
        "https://www.google.ca/*"
      ],
      "css": [
        "src/inject/inject.css"
      ]
    },
    {
      "run_at": "document_end",
      "matches": [
        "https://www.google.ca/*"
      ],
      "js": [
        "src/inject/inject.js"
      ]
    }
  ]
}

在我的 inject.js 中

chrome.extension.sendMessage({}, function(response) {
    var readyStateCheckInterval = setInterval(function() {
    if (document.readyState === "complete") {
        clearInterval(readyStateCheckInterval);
        // ----------------------------------------------------------
        // This part of the script triggers when page is done loading
        console.log("Hello. This message was sent from scripts/inject.js");
        // ----------------------------------------------------------

    }
    }, 10);
});

window.addEventListener ("load", myMain, false);

function myMain (evt) {
    console.log('aaann');
    var jsInitChecktimer = setInterval (checkForJS_Finish, 111);

    function checkForJS_Finish () {
        if (    typeof SOME_GLOBAL_VAR != "undefined"
            ||  document.querySelector ("SOME_INDICATOR_NODE_css_SELECTOR")
        ) {
            clearInterval (jsInitChecktimer);
            // DO YOUR STUFF HERE.

            console.log('hi');
        }
    }
}

【问题讨论】：

标签： javascript google-chrome-extension

【解决方案1】：

在您的清单文件中，您有重复的内容脚本，一个是 CSS，一个是 JS。它应该是这样的：

  "content_scripts": [
    {
      "run_at": "document_end",
      "matches": [
        "https://www.google.ca/*"
      ],
      "js": [
        "src/inject/inject.js"
      ],
      "css": [
        "src/inject/inject.css"
      ]
    }
   ]

另外，如果你想让它匹配其他url，你需要专门添加它们，或者使用

"matches": ["<all_urls>"]

至于您提出的背景脚本，这实质上是对内容脚本概念的重新发明，它可能不符合您的最佳利益。我建议坚持使用内容脚本路线。

【讨论】：