chrome扩展：页面加载javascript后运行脚本

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了chrome扩展：页面加载javascript后运行脚本，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2695字，纯文字阅读大概需要4分钟。

内容图文

当页面完成加载时,这根本不会触发.基本上当我点击浏览器操作按钮时,它会触发它,并且在页面加载时,它将运行一个脚本.在我的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');
        }
    }
}

解决方法:

在清单文件中,您有重复的内容脚本,一个使用CSS,另一个使用JS.它应该如下所示：

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

此外,如果您希望它与其他网址匹配,则需要专门添加或使用

"matches": ["<all_urls>"]

至于你提出的后台脚本,这本质上是重新发明内容脚本的概念,它可能不符合你的最佳利益.我建议坚持使用内容脚本路由.

内容总结

以上是互联网集市为您收集整理的chrome扩展：页面加载javascript后运行脚本全部内容，希望文章能够帮你解决chrome扩展：页面加载javascript后运行脚本所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端