前言：
在上一篇我们对插件进行了一个简单的了解，这里我们尝试开发一个简易的代理插件
案例：
我们把需要的一些文件先创建出来
manifest.json配置文件popup.html：弹出窗口文件用于创建插件的弹出窗口界面，通常是在单击插件图标时显示的一个小窗口。弹出窗口可以包含插件的一些功能或者快捷操作，提供用户一种快速访问插件功能的方式。icon.png：图标文件用于指定插件在浏览器中显示的图标，包括在浏览器工具栏、扩展管理页面、插件设置页面等位置显示的图标。通常需要提供多个尺寸的图标文件，以适配不同的显示环境。popup.js：通常用于定义插件弹出窗口（popup）的行为和功能。当用户单击插件图标时，弹出窗口会显示，并加载相应的popup.js文件以实现特定的功能。
这里对popup.js做一个简单的介绍：
popup.js
- 与后台脚本通信：可以与后台脚本通信，向后台脚本发送消息以请求数据或执行某些操作。这种通信通常使用浏览器的消息传递 API 实现，例如 Chrome 扩展中的
chrome.runtime.sendMessage()。 - 与内容脚本通信：如果插件需要与当前活动页面中的内容脚本进行交互，也可以与内容脚本通信，向页面发送消息或从页面接收消息。
- 修改弹出窗口内容：可以通过 JavaScript 动态修改弹出窗口的内容，例如向用户显示特定的信息、加载数据、更新界面等。
- 处理用户交互：可以监听用户与弹出窗口的交互事件，例如按钮点击、表单提交等，以响应用户的操作并执行相应的逻辑。
- 关闭弹出窗口：当用户完成操作或插件不再需要弹出窗口时，可以关闭弹出窗口，以释放资源并返回到浏览器中。
- 与其他页面交互：除了与后台脚本和内容脚本的通信之外， 还可以与插件的其他页面（如选项设置页面、其他弹出窗口等）进行通信，以实现插件各个部分之间的数据共享和交互。
几个文件创建出来之后如下：
然后我们开始写插件的弹窗页面，页面内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Proxy Settings</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
min-width: 300px;
}
h2 {
margin-top: 0;
}
label {
display: block;
margin-bottom: 5px; /* 调整标签下边距 */
}
input[type="text"] {
width: calc(100% - 20px);
padding: 5px;
margin-top: 5px;
margin-bottom: 10px; /* 调整输入框下边距 */
}
button {
padding: 10px 20px;
cursor: pointer;
margin-top: 10px;
border-radius: 5px;
border: none;
background-color: #007bff;
color: #fff;
}
button:hover {
background-color: #0056b3;
}
.alert {
width: 200px;
padding: 10px;
border-radius: 5px;
margin-top: 20px;
display: none;
}
.success {
background-color: #28a745;
color: #fff;
border: 1px solid #218838;
}
.error {
background-color: #dc3545;
color: #fff;
border: 1px solid #c82333;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<h2>Proxy Settings</h2>
<label for="proxyHost">Proxy Host:</label>
<input type="text" id="proxyHost" placeholder="Proxy Host">
<label for="proxyPort">Proxy Port:</label>
<input type="text" id="proxyPort" placeholder="Proxy Port">
<button id="setProxyBtn">Set Proxy</button>
<button id="resetProxyBtn">Reset Proxy</button>
<div class="alert success hidden" id="successMessage">代理设置成功</div>
<div class="alert error hidden" id="failureMessage">代理设置失败</div>
<div class="alert error hidden" id="emptyMessage">Host和Port不能为空</div>
<script src="js/popup.js"></script>
</body>
</html>
之后完善下对应的js内容，也就是popup.js中的内容，内容如下：
// 保存代理设置
function saveProxySettings(host, port) {
chrome.storage.sync.set({"proxyHost": host, "proxyPort": port}, function () {
console.log('Proxy settings saved successfully.');
});
}
// 加载代理设置
function loadProxySettings(callback) {
chrome.storage.sync.get(["proxyHost", "proxyPort"], function (result) {
var proxyHost = result.proxyHost || "";
var proxyPort = result.proxyPort || "";
callback(proxyHost, proxyPort);
});
}
document.addEventListener('DOMContentLoaded', function () {
var setProxyBtn = document.getElementById('setProxyBtn');
var resetProxyBtn = document.getElementById('resetProxyBtn');
var proxyHostInput = document.getElementById('proxyHost');
var proxyPortInput = document.getElementById('proxyPort');
loadProxySettings(function (host, port) {
proxyHostInput.value = host;
proxyPortInput.value = port;
});
setProxyBtn.addEventListener('click', function () {
var proxyHost = proxyHostInput.value;
var proxyPort = proxyPortInput.value;
if (proxyHost && proxyPort) {
setProxy(proxyHost, proxyPort, function (success) {
if (success) {
successMessage.style.display = 'block'; // 显示成功提示
saveProxySettings(proxyHost, proxyPort); // 保存代理设置
setTimeout(function () {
successMessage.style.display = 'none'; // 2秒后隐藏成功提示
window.close(); // 关闭设置页面
}, 500);
} else {
failureMessage.style.display = 'block'; // 显示失败提示
setTimeout(function () {
failureMessage.style.display = 'none'; // 2秒后隐藏失败提示
}, 2000);
}
});
} else {
emptyMessage.style.display = 'block'; // 显示失败提示
setTimeout(function () {
emptyMessage.style.display = 'none'; // 2秒后隐藏失败提示
}, 2000);
}
});
resetProxyBtn.addEventListener('click', function () {
resetProxy(function (success) {
if (success) {
successMessage.style.display = 'block'; // 显示成功提示
saveProxySettings("", ""); // 清空代理设置并保存
setTimeout(function () {
successMessage.style.display = 'none'; // 2秒后隐藏成功提示
window.close(); // 关闭设置页面
}, 500);
} else {
failureMessage.style.display = 'block'; // 显示失败提示
setTimeout(function () {
failureMessage.style.display = 'none'; // 2秒后隐藏失败提示
}, 2000);
}
});
});
function setProxy(host, port, callback) {
var config = {
mode: "fixed_servers",
rules: {
singleProxy: {
scheme: "http",
host: host,
port: parseInt(port)
},
bypassList: []
}
};
chrome.proxy.settings.set(
{value: config, scope: 'regular'},
function () {
var success = !chrome.runtime.lastError;
callback(success);
}
);
}
function resetProxy(callback) {
chrome.proxy.settings.clear(
{scope: 'regular'},
function () {
var success = !chrome.runtime.lastError;
callback(success);
}
);
}
});
这个里面包括了对代理的设置及代理的重置功能，以及对设置的代理的保存功能。接下来我们再完善一下manifest.json 这个配置文件，配置内容如下：
{
"manifest_version": 2,
"name": "Proxy Extension",
"version": "1.0",
"description": "代理插件",
"permissions": [
"proxy",
"tabs",
"storage"
],
"icons": {
"128": "icon.png"
},
"browser_action": {
"default_popup": "popup.html",
"default_title": "Change Proxt Setting"
}
}
到这里整个插件基本上就完成了，接下来我们把插件安装一下，直接将整个文件夹拖进扩展程序中进行安装，安装之后如下：
这就代表安装完成了，接下来我们在浏览器右上角打开插件看看，如下：
可以看到整个界面了，接下来我们输入代理试试，如下：
这就说明设置成功了，接下来我们看看代理是否切换成功了，如下：
可以看到代理切换成功，接下来我们再次点击插件，如下：
可以看到代理信息还在，我们点击Reset Proxy重置下代理，完成之后再看下，如下：
可以看到代理就没了，接下来再看看我们的代理，如下：
现在展示的就是我们的本地ip了，经过测试整个功能都是正常的，说明我们这个插件没有问题。
这篇文章到这里就结束了，之前有篇文章我们是通过魔改插件的形式来实现的自由切换代理，但是那种方案还有一些问题，比如插件安装之后会有弹窗出现，再一个就是必须得打开到情景模式pac_proxy页面，且要保持页面不能关闭等局限性，这篇文章我们有了这个代理插件开发的经验，下一篇我们在这个插件的基础上实现自由切换代理。
2111
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
