How to make a basic chrome extension to block certain websites?

问题

What I have so far:

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

I was hoping that by loading this unpacked extension, it would "block" the listed websites (testing with Google.com and dictionary.com). I'm not sure how the blocking functionality actually works, but I figured either the website wouldn't load or it would display some sort of general error.

However, nothing seems to happen, so I'm guessing that either my understanding of "blocking" is flawed and/or my code isn't written correctly. I based my code off these references:

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

"The following example achieves the same goal in a more efficient way because requests that are not targeted to www.evil.com do not need to be passed to the extension:

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

This is my 1st time attempting to make a chrome extension, and I'm not really familiar with html or javascript, so apologies if I'm way off the mark with my implementation.

回答1:

Here is the code for the site-blocking extension that I made.

Following is the manifest.json file:

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

Here is the content.js file which contains the main code:

//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/");

And here is the small_win.html file which opens a popup when you click the icon of the extension:

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

Here is the link to my github repository: https://github.com/sak1sham/LaserFocus which contains the code for the extension.

Thank you

来源：https://stackoverflow.com/questions/46624554/how-to-make-a-basic-chrome-extension-to-block-certain-websites

标签

google-chrome-extension