Question

我正在开发一个简单的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';
    }
}

background.js

// 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();
...

这就是对话气泡弹出几秒然后消失的程度。我相信必须有更好的方法。

Answer 1

首先，您可能已经发现只有Content Scripts才能与网页互动。到目前为止，你有一个内容脚本。

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

通过声明应该在哪里运行in the manifest。当您访问匹配的页面时，Chrome会自动运行它。
明确注入executeScript（所谓的programmatic injection）。

奇怪的是，你做两个。你只需要一个 - 因为你不想要互动，你不需要任何但内容脚本及其匹配的清单部分。无需页面操作，并且（当前）不需要后台脚本。

最后，让我们看看您的内容脚本以及编辑的工作原理。

脚本执行后，您的第一个版本会尝试遍历某些DOM节点。您的第二个版本完全相同，但延迟时间为5秒。您的页面操作版本具有可变延迟，具体取决于它何时被单击。

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

有一个关于检测DOM变化的规范问题，我只是link to it here。这不是一个非常简单的话题，但也不是太复杂。我个人的建议是使用mutation-summary library，请参阅tutorials。

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

1 个答案: