Javascript 如何在没有用户输入的情况下运行内容更改Chrome扩展？

我正在开发一个简单的Chrome扩展来隐藏某些页面上的元素。我已经整理了一些我在网上找到的例子，我已经把它作为一个浏览器操作，需要用户点击图标来激活它。我正在寻找一种方法，使它只是运行和隐藏的内容自动

我已经有几年没有做过太多的编程了，所以请原谅我搞得一团糟。我正在考虑重新开始编程，并认为整合一些扩展会很有趣

那么我在这里错过了什么？我已经附加了我现在正在处理的一个代码，它隐藏了Pinterest.com的聊天记录

清单

{
  "name": "NoPChat",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "Hide Pinterest Chat",
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action" :
  {
    "default_icon" : "images/icon-19.png",
    "default_title" : "Toggle Pinterest chat"
  },
  "permissions" : [
    "declarativeContent",
    "activeTab"
  ],
  "content_scripts":
  [
    {
      "matches": ["*://*.pinterest.com/*"],
      "js": ["content.js"],
      "run_at": "document_end"
    }
  ],
  "icons" : {
    "48" : "images/icon-48.png",
    "128" : "images/icon-128.png"
  }
}

content.js

hidePinterestChat();

function hidePinterestChat() {
   var el = document.getElementsByClassName("Conversation Module"),
       n = el.length;

   for (var i = 0; i < n; i++) {
     var e = el[i];
     e.style.display = 'none';
    }

    var el2 = document.getElementsByClassName("Module Dropdown PositionModule aboveModal activeConversationDropdown active ui-droppable positionModuleFixed positionFixed defaultCaret positionModuleElement positionRight"),
       n = el2.length;

   for (var i = 0; i < n; i++) {
     var e = el2[i];
     e.style.display = 'none';
    }
}

// Copyright (c) 2011 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

// When the extension is installed or upgraded ...
chrome.runtime.onInstalled.addListener(function() {
  // Replace all rules ...
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    // With a new rule ...
    chrome.declarativeContent.onPageChanged.addRules([
      {
        // That fires when a page's URL contains a 'g' ...
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { urlContains: 'pinterest.com' },
          })
        ],
        // And shows the extension's page action.
        actions: [ new chrome.declarativeContent.ShowPageAction() ]
      }
    ]);
  });
});


chrome.pageAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(null, {file: "content.js"});
});

编辑： 通过在content.js中添加超时，我使它工作得更好

function partA() {
  window.setTimeout(hidePinterestChat,5000);
}
partA();
hidePinterestChat();
...

---

对话泡泡会突然出现几秒钟，然后消失。我相信一定有更好的方法。

首先，您可能已经发现只有页面才能与之交互。到目前为止还不错，你有一个内容脚本

下一个任务是运行该内容脚本。有两种方法可以做到这一点：

通过声明它应该运行的位置。当你访问一个匹配的页面时，Chrome会自动运行它

通过显式地向它注入

executeScript

（所谓的）

奇怪的是，你两者都做。您只需要一个，因为您不需要交互，所以除了内容脚本及其匹配的清单部分之外，您什么都不需要。不需要页面操作，并且（当前）不需要背景脚本

最后，让我们看看您的内容脚本以及为什么您的编辑可以工作

您的第一个版本尝试在脚本执行时通过一些DOM节点进行循环。你的第二个版本做的完全一样，但是有5秒的延迟。您的页面操作版本执行此操作时会有可变延迟，具体取决于单击的时间

那么，它告诉我们什么呢？当脚本执行时，节点可能还不存在。考虑到默认情况下，内容脚本在初始DOM树完全构建后运行，这意味着在加载完成后，通过页面的JavaScript代码动态添加注释

---

有一个关于检测DOM更改的规范问题，我只想。这不是一个很容易的话题，但也不太复杂。我个人的建议是使用，请参阅。

我已经删除了我的答案，因为我误解了您的代码；您没有格式化

hideItemRestChat（），这是一个非常重要的输入错误作为代码。抱歉-我不确定格式错误在哪里。我已经修复了它-您在多行代码之前没有留下空行。请参见编辑历史记录。