下面我将介绍如何使用 JavaScript 和 HTML 创建一个简单的浏览器插件。在这个例子中，我们将创建一个可以在网页中高亮选中文本的插件。
步骤如下：
1.创建一个新文件夹，用于存储插件文件。
2.在文件夹中创建一个名为 manifest.json 的文件。这个文件用于描述插件的基本信息，如名称、版本、描述、权限等。以下是一个示例 manifest.json 文件的内容：
{
"name": "Highlighter",
"version": "1.0",
"description": "A simple highlighter plugin",
"manifest_version": 2,
"permissions": ["activeTab"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
]
}
在这个例子中，我们声明了插件的名称、版本和描述，还指定了所需的权限。manifest_version 声明了插件的 manifest 版本，content_scripts 用于指定插件注入的脚本。在这里我们要注入一个名为 content.js 的脚本，这个脚本将在所有网址上运行。
3.创建 content.js 文件，并添加以下代码：
function highlightText() {
var selection = window.getSelection().toString();
var range = window.getSelection().getRangeAt(0);
var span = document.createElement('span');
span.style.backgroundColor = 'yellow';
span.appendChild(range.extractContents());
range.insertNode(span);
}highlightText();
});
这个脚本将在每次鼠标松开时检查是否有文本被选中。如果有，它会创建一个带有黄色背景颜色的 span 元素，并将所选文本插入其中，然后将这个 span 元素插入到文档中。
4.创建一个 popup.html 文件，用于创建插件的弹出窗口。以下是一个示例 popup.html 文件的内容：
<html>
<head>
<title>Highlighter</title>
</head>
<body>
<p>Highlight selected text</p>
</body>
</html>
这个弹出窗口非常简单，只是一个包含一段文本的 HTML 页面。
5.创建一个 popup.js 文件，并添加以下代码：
chrome.tabs.executeScript({
file: 'content.js'
});var button = document.getElementById('highlight-button');
button.addEventListener('click', function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {highlight: true});
});
});
});
这个脚本将在弹出窗口加载时注入 content.js 脚本。然后，当用户单击弹出窗口中的按钮时，它将向当前选项卡发送一个消息，告诉它要高亮选定的文本。在这里，我们使用 Chrome 扩展程序 API 中的 chrome.tabs.executeScript 和 chrome.tabs.sendMessage 方法来与当前选项卡通信。
6.创建一个 popup.css 文件，并添加以下代码：
button {
margin-top: 10px;
padding: 5px;
border: none;
background-color: #3f51b5;
color: white;
font-weight: bold;
cursor: pointer;
}
这个样式表定义了弹出窗口中的按钮样式。
将所有文件打包成一个 .zip 文件，并将其上传到 Chrome Web Store 或在 Chrome 浏览器中进行开发模式测试。
在 Chrome 浏览器中进行开发模式测试的步骤如下：
- 打开 Chrome 浏览器，并输入
chrome://extensions/地址。 - 确保右上角的“开发者模式”按钮已启用。
- 单击“加载已解压的扩展程序”按钮，选择插件文件夹。
- 打开任何网站，并尝试选中一段文本，将看到该文本被高亮显示。单击浏览器工具栏中的插件图标，将弹出一个窗口，其中包含一个按钮。单击该按钮将高亮选定的文本。
![图片[1]吾爱共享网 - 免费分享软件资源、电子书和学习资料 - 付费插件 - wordpress插件网页中高亮选中文本的插件 (Chrome插件教程)吾爱共享网 - 免费分享软件资源、电子书和学习资料 - 付费插件 - wordpress插件吾爱共享](http://cdn.sharei.cn/wp-content/uploads/2023/02/2023021504170876.png?x-oss-process=image/resize,m_fill,w_1546,h_828#)
插件已经打包，请自由下载。
附
件
下
载
暂无评论内容