求助编写一个简单的浏览器扩展插件
发布网友
发布时间：2024-10-04 20:08
共1个回答
热心网友
时间：2024-10-06 19:20
要实现描述的功能，需要创建一个Chrome扩展程序，因为360极速浏览器基于Chromium内核，支持Chrome扩展。以下是一个基本的指南，用于创建一个简单的Chrome扩展程序，该程序可以实现关键词高亮显示、添加/删除关键词、查看已添加关键词，并且能够在不同页面上应用这些设置。
您希望实现的功能是：
A. 在网页中高亮显示指定关键词。
B. 查看已添加的关键词情况。
C. 添加和删除关键词。
D 应用在不同页面上，并且不会因为刷新等原因失效。
1. 创建 manifest.json
{
"manifest_version": 2,
"name": "关键词高亮显示",
"version": "1.0",
"description": "在网页中高亮显示指定关键词。",
"permissions": ["activeTab", "storage"],
"browser_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"],
"run_at": "document_end"
}
],
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
2. 创建 popup.html
{
"manifest_version": 2,
"name": "关键词高亮显示",
"version": "1.0",
"description": "在网页中高亮显示指定关键词。",
"permissions": ["activeTab", "storage"],
"browser_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"],
"run_at": "document_end"
}
],
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
3. 创建 popup.js
document.getElementById('addKeyword').addEventListener('click', function() {
var keyword = document.getElementById('keywordInput').value;
// 添加代码将关键词保存到Chrome存储
chrome.storage.sync.get('keywords', function(data) {
var keywords = data.keywords || [];
if (!keywords.includes(keyword)) {
keywords.push(keyword);
chrome.storage.sync.set({keywords: keywords});
}
});
});
document.getElementById('removeKeyword').addEventListener('click', function() {
var keyword = document.getElementById('keywordInput').value;
// 添加代码从Chrome存储中删除关键词
chrome.storage.sync.get('keywords', function(data) {
var keywords = data.keywords || [];
var index = keywords.indexOf(keyword);
if (index > -1) {
keywords.splice(index, 1);
chrome.storage.sync.set({keywords: keywords});
}
});
});
// 更新关键词列表的示例代码
function updateKeywordList() {
// 添加代码从Chrome存储中获取关键词列表，并显示在界面上
}
4. 创建 content.js
document.getElementById('addKeyword').addEventListener('click', function() {
var keyword = document.getElementById('keywordInput').value;
// 添加代码将关键词保存到Chrome存储
chrome.storage.sync.get('keywords', function(data) {
var keywords = data.keywords || [];
if (!keywords.includes(keyword)) {
keywords.push(keyword);
chrome.storage.sync.set({keywords: keywords});
}
});
});
document.getElementById('removeKeyword').addEventListener('click', function() {
var keyword = document.getElementById('keywordInput').value;
// 添加代码从Chrome存储中删除关键词
chrome.storage.sync.get('keywords', function(data) {
var keywords = data.keywords || [];
var index = keywords.indexOf(keyword);
if (index > -1) {
keywords.splice(index, 1);
chrome.storage.sync.set({keywords: keywords});
}
});
});
// 更新关键词列表的示例代码
function updateKeywordList() {
// 添加代码从Chrome存储中获取关键词列表，并显示在界面上
}
5. 测试和调试
在360极速浏览器中，打开 chrome://extensions/`页面，开启“开发者模式”，点击“加载已解压的扩展程序”，选择包含上述文件的文件夹。
注意事项：
请确保您的扩展程序图标（icon16.png, icon48.png, icon128.png）放在扩展程序目录中。本方案使用了chrome.storage.sync来同步关键词数据，这意味着用户在不同设备间登录时，关键词设置可以保持同步。
highlightKeyword函数使用了正则表达式来查找和高亮关键词。请注意，正则表达式可能需要根据实际情况调整，以避免错误匹配。
