javascript - 如何使用 Chrome 扩展程序阻止某些网站？

Question

我正在为一个项目制作一个简单的 chrome 扩展。我正在制作一个扩展程序来阻止某些 URL(社交媒体等)，以使学习更加高效。我不太擅长JS，但我想学习。我有一些想法，也许它可以阻止网站，或者只是在 div 中绘制一些内容来阻止其内容。另外，也许我可以在 popup.html 中输入一个 URL 来指定被阻止的网站。在 firebase 中保存数据。另外，我读到也许使用 declarativeWebRequest 更容易，但不太确定如何使用它。

Manifest.js

"name": "StudyBuddy",
"description": "Helps you study by blocking distracting websites",
"version": "2.0",
 "permissions": [
   "webRequestBlocking",
   "webRequest",
   "activeTab",
   "tabs",
   "http://*/*",
   "https://*/*"
],
 "content_scripts" : [{
    "matches": ["<all_urls>"],
    "js" : ["background.js"],
    "css" : ["styles.css"]



  }],
 "browser_action": {
   "default_title": "Blocks websites",
   "default_popup": "popup.html"

  },
  "manifest_version": 2

背景.js

console.log("Loaded extension");


function blockRequest(details) {
   return {cancel: true};
}

function updateFilters(urls) {
   if(chrome.webRequest.onBeforeRequest.hasListener(blockRequest))
     chrome.webRequest.onBeforeRequest.removeListener(blockRequest);
   chrome.webRequest.onBeforeRequest.addListener(blockRequest, {urls: ["*://*.facebook.com/*", "*://*.facebook.net/*"]}, ['blocking']);

}

目前我的扩展程序不会阻止任何内容。

Answer 1

好的，您的代码有两个问题:

• 您的 list .json 未指定 background.js，因此该代码未运行。
• 您实际上并没有从任何地方调用 updateFilters 函数。

我纠正了这两个问题，这个扩展对我来说效果很好，它按预期阻止了 Facebook。

总的来说，我建议您多阅读 documentation当您尝试开始时进行扩展，尤其是 background pages 上的部分和 event pages .

manifest.json:(请注意，我无权访问您的弹出 html/css，因此我必须从 list 中删除该部分)。

{
  "name": "StudyBuddy",
  "description": "Helps you study by blocking distracting websites",
  "version": "2.0",
  "permissions": [
     "webRequestBlocking",
     "webRequest",
     "activeTab",
     "tabs",
     "http://*/*",
     "https://*/*"
  ],
  "background" : {
    "scripts":  [
      "background.js"
    ]
  },
  "manifest_version": 2
}

背景.js

console.log("Loaded extension");


function blockRequest(details) {
   return {cancel: true};
}

function updateFilters(urls) {
   if(chrome.webRequest.onBeforeRequest.hasListener(blockRequest))
     chrome.webRequest.onBeforeRequest.removeListener(blockRequest);
   chrome.webRequest.onBeforeRequest.addListener(blockRequest, {urls: ["*://*.facebook.com/*", "*://*.facebook.net/*"]}, ['blocking']);
}

updateFilters();