Chrome扩展:运行脚本后页面已完成加载javascript

chrome extension: run script after page has finished loading javascript

本文关键字:已完成 加载 javascript 扩展 运行 脚本 Chrome      更新时间:2023-09-26

在页面加载完成时根本不会触发。基本上当我点击浏览器动作按钮时,它会触发它,在页面加载时,它会运行一个脚本。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);

我也试过在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"
      ]
    }
  ]
}

和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');
        }
    }
}

在你的manifest文件中,你有重复的内容脚本,一个是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>"]

至于你提议的背景脚本,那本质上是重新发明内容脚本的概念,它可能不符合你的最佳利益。我建议继续使用内容脚本路由