Chrome扩展：在页面加载完成后运行脚本 [英] chrome extension: run script after page has finished loading javascript

问题描述

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

this is not firing at all when the page finishes loading. Basically when I click the browser action button, it will trigger it on, and on page load, it will run a script. In my 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);

我也试着在清单中设置它

I've also tried to set it in the manifest

{
  "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中

and in my 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');
        }
    }
}

推荐答案

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

In your manifest file, you have duplicate content scripts, one with CSS and one with JS. It should look like this:

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

/ p>

Also, if you want it to match other urls, you will need to add them specifically, or use

"matches": ["<all_urls>"]

至于你提出的后台脚本，这基本上是重新发明了内容脚本的概念，它可能不符合你的最佳利益。我建议坚持内容脚本路线。

As for your proposed background script, that is essentially re-inventing the concept of content scripts, and it may not be in your best interest. I suggest sticking with the content script route.

这篇关于Chrome扩展：在页面加载完成后运行脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！