相信各位佬友经常会用到 Chrome浏览器 或者 类Chrome浏览器，这类浏览器有个非常好用的功能就是支持插件扩展。这个插件能让浏览器实现更多的玩法，而且让定制各类功能需求也变的得心应手。
恰巧今日得闲，花了一个小时手搓了一个简单的基础类扩展，也正好用这个实例为佬友们说说这个扩展的基本实现原理。实例的主要功能是 防止WebRTC泄露真实IP 和实现 各标签页的自动刷新。
用 https://www.browserscan.net/zh/webrtc 来测试是否存在WebRTC泄露
教程的所有文件尽量保存为utf-8格式
主配置：
manifest.json
{
"manifest_version": 3,
"name": "My extension library",
"version": "1.0",
"description": "Welcome to my extension library",
"permissions": ["tabs", "activeTab", "storage", "alarms", "privacy"],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html"
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content.js"],
"run_at": "document_start",
"all_frames": true
}]
}
主配置中的name、version、description可以随意写，permissions 声明插件所需的权限，content_scripts 功能非常强大（暂定匹配所有URL）。至于插件icon不是必须的，也不是今天的重点，如果有这方面需求的可以自己在主配置中添加即可。
主脚本：
background.js
//定义一个变量（是否启用WebRTC）、一个常量（判断是不是firefox）。
let pubwebrtc=false;
const isFirefox = /Firefox/.test(navigator.userAgent) || typeof InstallTrigger !== 'undefined';
//这个是关闭标签页触发的回调，主要功能是删除计时器
chrome.tabs.onRemoved.addListener((tabId) => {
chrome.storage.local.get(["refreshTabs"], (data) => {
let refreshTabs = data.refreshTabs || {};
if (refreshTabs[tabId]){
if (refreshTabs[tabId]["timer"])chrome.alarms.clear(refreshTabs[tabId]["timer"]);
delete refreshTabs[tabId];
chrome.storage.local.set({ refreshTabs });
}
});
});
//这个是设置并开启定时刷新的功能，由popup.html（交互式窗口）触发
function setRefreshTimer(tabId, interval) {
chrome.storage.local.get(["refreshTabs"], (data) => {
let refreshTabs = data.refreshTabs || {};
if (!refreshTabs[tabId]) refreshTabs[tabId]={};
if (refreshTabs[tabId]["timer"])chrome.alarms.clear(refreshTabs[tabId]["timer"]);
refreshTabs[tabId]["timer"]="auto"+tabId;
chrome.alarms.create(refreshTabs[tabId]["timer"], {delayInMinutes: 0, periodInMinutes: interval/60});
refreshTabs[tabId]["interval"] = interval;
chrome.storage.local.set({ refreshTabs });
});
}
//这个是接收popup.html传入的消息并做相应的处理，主要功能是开/关自动刷新、启用/禁用WebRTC
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
const { action, tabId, interval } = request;
if (action === "start_refresh") {
setRefreshTimer(tabId, interval);
} else if (action === "stop_refresh") {
chrome.storage.local.get(["refreshTabs"], (data) => {
let refreshTabs = data.refreshTabs || {};
if(refreshTabs[tabId]){
if(refreshTabs[tabId]["timer"]){
chrome.alarms.clear(refreshTabs[tabId]["timer"]);
delete refreshTabs[tabId]["timer"];
chrome.storage.local.set({ refreshTabs });
}
}
})
} else if (action === "start_webrtc") {
webrtcfunc(true,true);
} else if (action === "stop_webrtc") {
webrtcfunc(false,true);
}
sendResponse({ success: true });
});
//计时器主函数，主要功能是重载页面（不受其他外在因素影响）
chrome.alarms.onAlarm.addListener((alarm) => {
if (alarm.name.substr(0,4) == "auto") {
let tabId=parseInt(alarm.name.substr(4));
try{chrome.tabs.reload(tabId)}catch(e){}
}
});
//启用或禁用WebRTC后调用的功能函数
function webrtcaction() {
chrome.storage.local.get({
enabled: !pubwebrtc,
eMode: isFirefox ? 'proxy_only' : 'disable_non_proxied_udp',
dMode: 'default_public_interface_only'
}, prefs => {
const value = prefs.enabled ? prefs.eMode : prefs.dMode;
chrome.privacy.network.webRTCIPHandlingPolicy.clear({}, () => {chrome.privacy.network.webRTCIPHandlingPolicy.set({value}, () => {chrome.privacy.network.webRTCIPHandlingPolicy.get({}, s => {})})});
});
}
//开启、禁用WebRTC
function webrtcfunc(v,s){
let webrtc = v; pubwebrtc = webrtc;
if (s) chrome.storage.local.set({ webrtc });
webrtcaction();
}
//在插件加载、安装、更新时触发，主要功能是初始化WebRTC
function webrtcinit(){
chrome.storage.onChanged.addListener(() => {webrtcaction()});
chrome.storage.local.get(["webrtc"], (data) => {
let webrtc = data.webrtc || false;
webrtcfunc(webrtc,false);
});
}
//在插件加载、安装、更新时触发，主要功能是初始化计时器本地存储
function clearStoredTabs() {
let refreshTabs={};
chrome.storage.local.set({ refreshTabs });
}
chrome.runtime.onStartup.addListener(() => {webrtcinit(); clearStoredTabs()});
chrome.runtime.onInstalled.addListener((details) => {webrtcinit(); if (details.reason === "install") clearStoredTabs()});
交互式页面：
popup.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto refresh</title>
<style>
body { width: 200px; font-family: Arial, sans-serif; text-align: center; }
input { width: 30%; margin: 5px 0; }
button { width: 90%; margin: 5px 0; padding: 5px; }
</style>
</head>
<body>
间隔 <input type="number" id="interval" value=60 min="1"> 秒，自动刷新
<button id="onebutton"></button>
<script src="popup.js"></script>
<button id="webrtc" title="作用于全局"></button>
</body>
</html>
交互式页面配套的脚本文件：
popup.js
//定义提示文字常量
const strs=["开始刷新", "停止刷新", "<font color=green>当前无WebRTC泄漏</font>", "<font color=red>存在WebRTC泄漏风险</font>"]
//popup.html加载完成后执行，主要功能是和用户交互，并传递相应参数给background.js
document.addEventListener("DOMContentLoaded", () => {
const btn = document.getElementById("onebutton");
const wtn = document.getElementById("webrtc");
const intervalInput = document.getElementById("interval");
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
if (tabs.length === 0) return;
const tabId = tabs[0].id;
btn.innerHTML=strs[0];
intervalInput.focus();intervalInput.select();
chrome.storage.local.get(["refreshTabs"], (data) => {
let refreshTabs = data.refreshTabs || {};
if (refreshTabs[tabId]){
if (refreshTabs[tabId]["interval"]){
intervalInput.value = refreshTabs[tabId]["interval"];
intervalInput.select();
}
if (refreshTabs[tabId]["timer"]) {
btn.innerHTML=strs[1];btn.setAttribute("func","stop");
}
}
});
btn.addEventListener("click", () => {
if (btn.getAttribute("func")){
chrome.runtime.sendMessage({ action: "stop_refresh", tabId }, (response) => {
btn.innerHTML=strs[0];btn.removeAttribute("func");
});
}else{
if (isNaN(intervalInput.value) || intervalInput.value < 1) intervalInput.value=60;
let interval = parseFloat(intervalInput.value);
chrome.runtime.sendMessage({ action: "start_refresh", tabId, interval }, (response) => {
btn.innerHTML=strs[1];btn.setAttribute("func","stop");
});
}
});
chrome.storage.local.get(["webrtc"], (data) => {
let webrtc = data.webrtc || false;
if (webrtc){
wtn.innerHTML=strs[3];wtn.setAttribute("func","true");
}else wtn.innerHTML=strs[2];
});
wtn.addEventListener("click", () => {
if (wtn.getAttribute("func")){
chrome.runtime.sendMessage({ action: "stop_webrtc", tabId }, (response) => {
wtn.innerHTML=strs[2];wtn.removeAttribute("func");
});
}else{
chrome.runtime.sendMessage({ action: "start_webrtc", tabId }, (response) => {
wtn.innerHTML=strs[3];wtn.setAttribute("func","true");
});
}
});
});
});
强大的功能脚本（由于过于强大，所以不方便展示）
content.js
//其实这个脚本的强大与否，主要还是取决于自己想要做什么。
//理论上只要看得见的就能进行个性化操作。
(function() {
document.addEventListener('DOMContentLoaded', function() {
document.title = "Welcome " + document.title;
});
})();
加载插件：
1.将上述几个文件全部根据提示的文件名保存到本地（格式选UTF-8）
2.启动 chrome 并打开扩展页 chrome://extensions/
3.在扩展页面 启用开发者模式
4.点击 加载已解压的扩展程序 ，选择上述文件保存的目录即可
用 https://www.browserscan.net/zh/webrtc 再次来测试是否存在WebRTC泄露
右上角的 扩展程序 按钮可以打开插件 交互式页面
因为考虑到实用性和教程易于理解，所以代码基本上都采用较为基础的结构书写。
扩展插件的功能很多，在于你想干什么能干什么，在什么人手里用，所以剩下的就看佬友们的个人发挥了。
相信佬友们会写出更好的扩展，还请多多交流与分享。
Good luck to all
