如何制作基本的Chrome扩展程序以阻止某些网站? [英] How to make a basic chrome extension to block certain websites?
问题描述
到目前为止我所拥有的:
What I have so far:
manifest.json
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
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进行测试).我不确定阻止功能的实际运作方式，但我认为该网站无法加载或会显示某种一般性错误.
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
下面的示例以更有效的方式实现了相同的目标，因为不需要以www.evil.com为目标的请求无需传递给扩展名:
"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"]); "
这是我第一次尝试进行chrome扩展，而且我对html或javascript并不是很熟悉，因此如果我的实现不符合要求，我深表歉意.
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.
推荐答案
这是站点阻止的代码扩展.
以下是 manifest.json 文件:
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"
}
}
这是 content.js 文件，其中包含主要代码:
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/");
这是 small_win.html 文件，当您点击扩展程序的图标时，该文件会打开一个弹出窗口:
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>
这是我的github存储库的链接: https://github.com/sak1sham/LaserFocus，其中包含扩展程序的代码.
Here is the link to my github repository: https://github.com/sak1sham/LaserFocus which contains the code for the extension.
谢谢
这篇关于如何制作基本的Chrome扩展程序以阻止某些网站?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
