Question

不是Executing Chrome extension onclick instead of page load的副本，因为我需要在popup.html中按下按钮执行脚本，而不是在用户按下图标时。

这是我的第一个chrome扩展程序，我的内容.js在页面加载时的工作方式，但我只想在用户按下popup.html中的按钮后执行它。我知道您可以在manifest.json中指定run_at，但这不起作用，因为我希望它仅在用户点击按钮（而不是图标）时运行，并且我使用{ {1}}所以我需要在不包含字母“g”的网址上显示图标，因此我的background.js中的规范。我想我一定会错过关于background.js和content.js之间的沟通的事情，但我感到非常迷茫，所以如果有人能解释我错过的那些会很棒的事情。

这是我的 manifest.json ：

pageAction

Background.js ：

{
"manifest_version": 2,

"name": "my extension",
"description": "it doesnt work",
"version": "0.1",
"background": {
"scripts": ["background.js"],
"persistent": false
 },

"permissions": [
"declarativeContent"
 ],

 "page_action": {
    "default_popup": "popup.html"
    },  

"icons" : { "16": "16.png",
          "48": "48.png",
          "128": "128.png" },

"content_scripts": [
{
  "js": ["content.js"],
  "matches": ["<all_urls>"],
  "run_at": "document_end"
   }
   ]
   }

Content.js ：

chrome.runtime.onInstalled.addListener(function() {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([
  {
    conditions: [
      new chrome.declarativeContent.PageStateMatcher({
        pageUrl: { urlContains: 'g' },
      })
    ],
    chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(null, {file: "content.js"});
   }); ]
  }
  ]);
  });
   });

popup.html ：

 document.addEventListener("DOMSubtreeModified", function(event){
    if(document.getElementsByClassName(".class")) {
        var x = document.querySelectorAll(".class");
        var i;
        for (i = 0; i < x.length; i++) {
            x[i].style.visibility = "hidden";
       }            }
      });

Answer 1

如果您在所选标签上，则会运行此选项。您可能需要更改选择该选项卡的方式。基本上，这将向选项卡发送请求，选项卡将侦听这些请求。如果你得到了正确的问候，你可以做你的功能。

popup.html

<html>
  <head>
    <script type="text/javascript" src="content.js"></script>
  </head>
  <body>
    <p>Turn off <span>class, "class"</span></p>
    <button type="button" id="button">Turn off</button>
  </body>
</html>

background.js

$('#button').on('click',function()
{
   chrome.tabs.getSelected(null, function(tab) {
    chrome.tabs.executeScript(tab.id, {file: "content_script.js"});
   });
});

content.js

if(document.getElementsByClassName(".class")) {
    var x = document.querySelectorAll(".class");
    var i;
    for (i = 0; i < x.length; i++) {
        x[i].style.visibility = "hidden";
    }            
}

另外，正如@Makyen建议的那样，从清单中删除内容脚本，因此并不总是将其注入每个选项卡。我根据这个建议编辑了我的答案。

按钮点击时执行content.js，而不是页面加载

1 个答案: