Chrome扩展:修改网页内容

Question

我试图做一个简单的Chrome扩展，我将“阻止”网站Reddit的内容，代之以一个简短的文本。到目前为止，这就是我所拥有的：

manifest.json

{
"manifest_version": 2,

"name": "BlockIt",
"description": "Block Reddit, increase productivity!",
"version": "1.0",

"browser_action": {
  "default_icon": "icon.png",
  "default_title": "BlockIt"
},

"permissions": [
  "storage", "tabs",
  "http://www.reddit.com/*"
],

"content_scripts": [
  {
    "matches": [ "*://reddit.com/*" ],
    "js": ["content-script.js"]
  }
] 
}

popup.html

<!doctype html>
<html>
  <head>
    <style>
      body {
        font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif;
        background-color:#EFF7FF;
        margin: 5px 5px 5px 5px;
        width: 110px;
        height: 100%;
        text-align:center;
      }
    </style>
    <!--Scripts-->
      <script src="popup.js"></script>
  </head>
  <body>
    <h2>BlockIt!</h2>
    <div id="en"><label for="enable">Enable BlockIt</label> <input id="enable" type="checkbox" style="vertical-align:middle; position:relative; bottom: 1px;"/>
    </div>
  </body>
</html>

popup.js

document.addEventListener('DOMContentLoaded', function () {
    document.querySelector('#enable').addEventListener('change', changeHandler);
});

function changeHandler() {
    if (enable.checked) {
        chrome.storage.sync.set({ 'enable': true }, function () { });
    }
}

content-script.js

var content = document.getElementsByTagName("body");
var text = "BlockIt enabled (to disable, click on the icon).";
//TODO: replace content with text

我现在有两个主要问题:我不确定我应该如何修改网页的内容并将其替换为上面的text，而且我也不确定在选中popup.html中的复选框时如何注入content-script.js。我该怎么处理这件事？

编辑：我对我的代码做了如下更改：

content-script.js

chrome.storage.sync.get({ enable: false }, items=> {
    if (items.enable) {
        document.body.textContent = "BlockIt enabled (to disable, click on the icon).";
    }
});

它成功地改变了网页的主体，但现在的问题是，popup.html的内容也会更改为相同的文本。什么地方出问题了？

编辑2：我在popup.html中删除了content-scrip.js。复选框的状态仍然不持久。这似乎是一个简单的解决方案，但我似乎无法修复它。任何帮助都将不胜感激。

Answer 1

一种可能的方法是在将内容-script.j注入页面时使用chrome.storage.sync.get()获取启用状态：

content-script.js

chrome.storage.sync.get({enable:false}, items=> {
    if(items.enable) {
        document.body.textContent="BlockIt enabled (to disable, click on the icon).";
    }
});

对于当前页面来说，这是不可逆的。考虑到您的用户可能期望该块是可逆的，而不必重新加载页面，您可能需要考虑一种与替换所有内容不同的完成块的方法。

此外，这只会替换启用块后加载的页面的<body>。它不会影响已经加载的页面。您可能希望使用chrome.tabs.query()获取当前显示reddit.com的选项卡列表。然后，您将需要使用chrome.tabs.executeScript()再次注入脚本。

类似于：

//This requires the "tabs" permission.
//Execute after you have stored the data to chrome.storage.sync (e.g. in the callback)
chrome.tabs.query({url:"*://reddit.com/*"},tabs=>{
    tabs.forEach(tab=>{
        chrome.tabs.executeScript(tab.id,{file:"content-script.js"});
    });
});

Answer 2

使用 API请求重定向阻止可能会更节省资源。

假设您有一个页面blocked.html来代替内容显示。

然后，再假设扩展状态存储在chrome.storage.sync中，就像Mayken的答案一样。您将需要该值的同步缓存，因为重定向必须是同步的。

// Background script
var enabled;

function cacheEnabled() {
  chrome.storage.sync.get({enable: false}, data => {
    enabled = data.enable;
  });
}

cacheEnabled();
chrome.storage.onChanged.addListener(cacheEnabled);

chrome.webRequest.onBeforeRequest.addListener(
  details => {
    if (enabled) {
      return { redirectUrl: chrome.runtime.getURL("blocked.html") };
    }
  },
  {
    urls: ["*://*.reddit.com/*"],
    types: ["main_frame", "sub_frame"]
  },
  ["blocking"]
);

这需要权限"webRequest", "webRequestBlocking", "*://*.reddit.com/*"。

注意:这不是一个最佳的解决方案:更好的做法是根据enabled注册/注销侦听器，而不是在监听器中检查它(这应该尽可能快)。这是一个练习。