如何制作一个基本的 chrome 扩展来阻止某些网站？答案

【问题标题】：How to make a basic chrome extension to block certain websites?如何制作一个基本的 chrome 扩展来阻止某些网站？
【发布时间】：2017-10-07 20:00:13
【问题描述】：

到目前为止我所拥有的：

manifest.json

{
  "name": "Testing",
  "version": "0.1",
  "manifest_version": 2,
  "description": "Hi there.",
  "background": {
	"scripts": ["background.js"]
  },

  "icons": {
    "128" : "images/test.png"
  },
  "browser_action": {
    "default_icon": "images/test2.png",
    "default_title": "test"
  },
  "permissions": [
	"webRequest",
	"webRequestBlocking",
	"https://www.google.com/*",
	"http://www.dictionary.com/*"
  ]
}

background.js

chrome.webRequest.onBeforeRequest.addListener(function(details) { 
		return {cancel: true}; 
	},
	{urls: ["https://www.google.com", "http://www.dictionary.com/*"]},
	["blocking"]);

我希望通过加载这个解压缩的扩展程序，它会“阻止”列出的网站（使用 Google.com 和 dictionary.com 进行测试）。我不确定阻止功能实际上是如何工作的，但我认为要么网站无法加载，要么会显示某种一般错误。

但是，似乎什么都没有发生，所以我猜测要么是我对“阻塞”的理解存在缺陷，要么是我的代码没有正确编写。我的代码基于这些参考：

https://developer.chrome.com/extensions/examples/extensions/catblock/manifest.json https://developer.chrome.com/extensions/examples/extensions/catblock/background.js https://developer.chrome.com/extensions/webRequest

“以下示例以更有效的方式实现了相同的目标，因为不针对 www.evil.com 的请求不需要传递给扩展：

  chrome.webRequest.onBeforeRequest.addListener(
    function(details) { return {cancel: true}; },
    {urls: ["*://www.evil.com/*"]},
    ["blocking"]); "

这是我第一次尝试制作 chrome 扩展程序，我对 html 或 javascript 并不十分熟悉，所以如果我的实现偏离了标准，请见谅。

【问题讨论】：

总是使用 devtools 调试器。在这种情况下for the background page。您将看到一个错误：https://www.google.com 不是有效模式。只需添加/*
@wOxxOm 好的，我将两个条目都更改为 ://.google.com/ 我检查了调试器工具，没有看到任何错误，但扩展名似乎仍然没有做任何事情。
显然你没有重新加载扩展。 chrome://extensions 页面上有一个Reload 操作链接。
@wOxxOm 我设法让它工作了：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: ["*://*.google.com/*"]}, ['blocking']); } updateFilters(); 不知道为什么以前的实现不起作用。
添加/*后，原始发布的代码才有效。无需删除侦听器。它什么也不做，因为 API 无论如何都不会注册侦听器的第二个副本。如果它对您不起作用，则说明您做错了其他事情。

标签： google-chrome-extension

【解决方案1】：

这是我制作的site-blocking extension 的代码。

以下是 manifest.json 文件：

{
  "manifest_version": 2,

  "name": "SiteBlocker",
  "version": "1.0.0",
  "description": "Block non-important info from your browsers",

  "content_scripts": [{
    "js": ["content.js"],
    "matches": ["http://*/*", "https://*/*"]
  }],
  "browser_action": {
      "default_icon": "icons8-fire-96.png", //change this icon to your icon file
      "default_popup": "small_win.html"
    }
}

这是包含主要代码的 content.js 文件：

//BLOCK WORDS
findString = function findText(text) {
  if(window.find(text)){
    document.documentElement.innerHTML = '';
    document.documentElement.innerHTML = 'This site is blocked';
    document.documentElement.scrollTop = 0;
  };
}

findString("WordToBlock");

//BLOCK THE PARTIAL DOMAINS
findURL = function changeURL(text){
  var current = window.location.href;
  if(current === text){
    window.location.replace("https://www.google.co.in");
  }
}

//BLOCK THE ENTIRE DOMAIN WITH THE FOLLOWING FUNCTION
findAllURL = function changeAllURL(text){
  var current = window.location.href;
  if(current.startsWith(text)){
    document.documentElement.innerHTML = '';
    document.documentElement.innerHTML = 'Domain is blocked';
    document.documentElement.scrollTop = 0;
  }
}


findURL("https://www.quora.com/");
findAllURL("https://www.facebook.com/");

这里是 small_win.html 文件，当您单击扩展程序的图标时会打开一个弹出窗口：

<!DOCTYPE html>
<html>
<head>
  <style media="screen">
      body {
          min-width:500px;
      }
  </style>
</head>
<body>
  Add the content of the popup window
</h3>
</body>
</html>

这是我的 github 存储库的链接：https://github.com/sak1sham/LaserFocus，其中包含扩展的代码。

谢谢

【讨论】：