Javascript 单击按钮执行content.js，而不是页面加载_Javascript_Html_Google Chrome Extension

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

javascript html google-chrome-extension

Javascript 单击按钮执行content.js，而不是页面加载,javascript,html,google-chrome-extension,Javascript,Html,Google Chrome Extension,不是的副本，因为我需要在popup.html中的按钮上执行脚本，而不是在用户按下图标时执行脚本这是我的第一个chrome扩展，我已经让content.js按照页面加载的方式工作，但我只想在用户按下popup.html中的按钮后执行它。我知道您可以在manifest.json中指定run_at，但这不起作用，因为我希望它只在用户单击按钮（而不是图标）时运行，并且我正在使用pageAction，因此我需要在不包含字母“g”的URL上将图标灰显，因此我background.js中的规范就是这样。我想

不是的副本，因为我需要在popup.html中的按钮上执行脚本，而不是在用户按下图标时执行脚本

这是我的第一个chrome扩展，我已经让content.js按照页面加载的方式工作，但我只想在用户按下popup.html中的按钮后执行它。我知道您可以在manifest.json中指定

run_at

，但这不起作用，因为我希望它只在用户单击按钮（而不是图标）时运行，并且我正在使用

pageAction

，因此我需要在不包含字母“g”的URL上将图标灰显，因此我background.js中的规范就是这样。我想我一定错过了background.js和content.js之间的交流，但是我感觉很失落，所以如果有人能解释我错过了什么，那就太好了

这是我的manifest.json：

Content.js：

document.addEventListener（“DOMSubtreeModified”，函数（事件）{
if（document.getElementsByClassName（“.class”））{
var x=document.querySelectorAll（“.class”）；
var i；
对于（i=0；i


popup.html：

关闭类，“类”
关掉
如果您在所选选项卡上，此操作将运行。不过，您可能需要更改选择该选项卡的方式。基本上，这将向选项卡发送请求，选项卡将侦听这些请求。如果你得到了正确的问候，你就可以履行你的职责了
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>

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";
    }            
}

if（document.getElementsByClassName（“.class”））{
var x=document.querySelectorAll（“.class”）；
var i；
对于（i=0；i

此外，正如@Makyen所建议的，从清单中删除内容脚本，这样它就不会总是被注入到每个选项卡中。我也根据这个建议编辑了我的答案。
一般来说，如果您的用户交互开始于用户单击browserAction
按钮，那么应该向内容脚本注入manifest.jsoncontent\u script
条目。您很少希望使用两种方法注入相同的脚本。如果用户交互开始于用户单击browserAction
按钮，则内容脚本应注入manifest.jsoncontent\u脚本
条目，而不是manifest.json。在每个URL中注入是一种惰性编程，它会消耗用户资源。我们这些有数百个标签的人呢？不需要扩展未使用的选项卡中的额外内容脚本。（是的，OP是双向的，但是你选择保留manifest.jsoncontent\u scripts
entry）。@Makyen你说得对。我编辑了我的答案。我的chrome扩展版还是有点生锈。谢谢，这样更好。background.js中的代码应该在popup.html中加载的脚本中（例如，popup.js加载在
标记content.js当前的方式中）。不应在popup.html中加载content.js文件。如果在弹出窗口中使用jQuery，则需要加载它。目前，鉴于您在弹出窗口中使用的jQuery代码数量最少，您应该将其转换为普通JavaScript，而不是加载jQuery。您需要将
标记移动到
的末尾，或者使用DOMContentLoaded
侦听器。我的jquery已经生锈了，有人可以将background.js转换为vanilla js吗？@Nat类似的东西<代码>文档.getElementById（“按钮”）.addEventListener（“单击”，函数（）{}）。函数中的内容将是相同的。
 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";
       }            }
      });

<html>
<head>
<script type="text/javascript" src="content.js"></script>
</head>
<body>
<p>Turn off <span>class, "class"</span></p>
<button type="button">Turn off</button> 
</body>
</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>

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

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