Question

我试图制作一个简单的Chrome扩展程序，我会阻止＆＃39; 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 () { });
    }
}

内容-的script.js

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

我现在遇到两个主要问题：我不确定如何修改网页内容并将其替换为上面的text，而我是＆＃39 ;当检查content-script.js中的复选框时，我不确定如何注入popup.html。我该如何处理这个问题？

修改：我对代码进行了以下更改：

内容-的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 ：我已移除content-scrip.js中的popup.html。复选框的状态仍然不存在。这似乎是一个简单的解决方案，但我似乎无法修复它。任何帮助将不胜感激。

Answer 1

一种可能性是在 content-script.j 注入页面时使用chrome.storage.sync.get()获取启用状态：

内容的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

阻止使用webRequest 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注册/取消注册侦听器更好，而不是在侦听器内检查（应该尽可能快）。这是一个练习。

Chrome扩展程序：修改网页内容

2 个答案: