如何使用我的 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

background.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

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

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

我纠正了这两个问题，这个扩展对我来说工作正常，它按预期阻止了 Facebook。

总的来说，我建议您多阅读 documentation for extensions as you try to get started, especially the parts on background pages and event pages。

manifest.json：（请注意，我无权访问您的弹出窗口 html/css，因此我不得不从清单中删除该部分）。

{
  "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
}

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

如何使用我的 Chrome 扩展阻止某些网站？

How do I block certain websites with my Chrome Extension?

javascript

google-chrome

google-chrome-extension

blocking