如何使用Chrome扩展程序阻止某些网站? [英] How do I block certain websites with my Chrome Extension?

问题描述

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

I'm making a simple chrome extension for a project. I am making an extension that blocks certain URL's(social media etc) to make studying more efficient. I'm not very good in JS but I want to learn. I had some ideas that maybe it could either block the website or just draw something in a div blocking its content. Also, maybe I could input an URL into popup.html to specify the blocked website. Saving data in firebase. Also, I read that maybe its easier to use declarativeWebRequest but not quite sure how to use it.

Manifest.js

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

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']);

}

此刻，我的扩展程序没有阻止任何内容.

At the moment my extension doesnt block anything.

推荐答案

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

Ok, your code has two issues :

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

• Your manifest.json didn't specify background.js, so that code wasn't running.
• You didn't actually call the updateFilters function from anywhere.

我更正了这两个问题，此扩展程序对我来说很好用，它按预期阻止了Facebook.

I corrected both those issues and this extension works fine for me, it blocks Facebook as expected.

通常，我建议您在尝试扩展时阅读文档的更多信息开始使用，尤其是背景页面和

In general I suggest you do some more reading of the documentation for extensions as you try to get started, especially the parts on background pages and event pages.

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

manifest.json: (note that I don't have access to your popup html/css so I had to remove that section from the manifest).

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

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扩展程序阻止某些网站?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！