要创建一个用于阻止网站的Chrome扩展,您可以按照以下步骤进行操作:
步骤1:准备工作
manifest.json
的文件,并在其中包含扩展的必要信息。步骤2:编写manifest.json文件
在manifest.json
文件中,您需要提供扩展的名称、描述、版本号以及其他相关信息。此外,您还需要指定扩展的权限和要加载的背景脚本。以下是一个示例manifest.json
文件的内容:
{
"manifest_version": 2,
"name": "Block Website",
"description": "A Chrome extension to block websites",
"version": "1.0",
"permissions": [
"webRequest",
"webRequestBlocking",
"storage"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
},
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
}
步骤3:编写背景脚本
在根目录下创建一个名为background.js
的文件,并在其中编写扩展的背景脚本。该脚本将负责拦截和阻止特定网站的请求。以下是一个示例background.js
文件的内容:
chrome.webRequest.onBeforeRequest.addListener(
function(details) {
// 获取要拦截的网站
var blockedWebsites = [
"example.com",
"example2.com"
];
// 检查请求的网址是否包含在被拦截的网站列表中
for (var i = 0; i < blockedWebsites.length; i++) {
if (details.url.includes(blockedWebsites[i])) {
return {cancel: true}; // 阻止请求
}
}
},
{urls: [""]}, // 监听所有请求
["blocking"]
);
步骤4:创建弹出窗口
在根目录下创建一个名为popup.html
的文件,并在其中编写扩展的弹出窗口。该窗口可以用于添加或删除要阻止的网站。以下是一个示例popup.html
文件的内容:
Block Website
Blocked Websites
步骤5:创建弹出窗口的脚本
在根目录下创建一个名为popup.js
的文件,并在其中编写与弹出窗口相关的脚本。该脚本将负责添加、删除和显示被阻止的网站。以下是一个示例popup.js
文件的内容:
document.addEventListener("DOMContentLoaded", function() {
var blockedWebsites = document.getElementById("blockedWebsites");
var websiteInput = document.getElementById("websiteInput");
var addButton = document.getElementById("addButton");
// 显示已阻止的网站
chrome.storage.sync.get("blockedWebsites", function(result) {
if (result.blockedWebsites) {
for (var i = 0; i < result.blockedWebsites.length; i++) {
var li = document.createElement