随着 Web 技术的发展，Chrome 插件和油猴脚本逐渐成为提升工作效率和改善网页用户体验的重要工具。本文将从零开始，详细介绍 Chrome 插件和油猴脚本的开发，带来清晰的开发流程、技术细节和代码案例。
一、什么是 Chrome 插件和油猴脚本
Chrome 插件：
Chrome 插件（Chrome Extension）是基于 Chromium 内核浏览器的一种扩展功能，旨在增强浏览器的能力。例如：广告拦截器、密码管理器等。
特点：
-
功能强大，可操控浏览器 API。 -
可通过权限访问网页 DOM、拦截网络请求等。 -
独立于网页，可与网页进行交互。
油猴脚本：
油猴脚本（Tampermonkey Script）是一种运行在用户浏览器中的脚本，通常通过浏览器扩展如 Tampermonkey 或 Violentmonkey 加载。主要用于修改或增强网页功能。
特点：
-
专注于网页功能的修改和增强。 -
通常针对特定网页修改内容，灵活性高。 -
能快速实现对网页的 DOM 操控。
二、Chrome 插件开发入门
1. Chrome 插件的基本结构
Chrome 插件由一个特殊的文件 manifest.json 描述插件的元信息，并可以包含 HTML、CSS、JavaScript 等资源文件。
基本目录结构：
my-chrome-extension/├── manifest.json // 插件的配置文件├── background.js // 背景脚本（可选）├── content.js // 内容脚本（可选）├── popup.html // 弹窗界面（可选）├── styles.css // 样式文件（可选）└── icons/ // 图标文件（可选）
2. manifest.json 文件
manifest.json 是 Chrome 插件的核心文件，必须包含以下信息：
-
插件名称、描述和版本号。 -
插件的权限。 -
插件加载的脚本文件。
manifest.json 示例：
{"manifest_version": 3, // 当前版本必须为 3"name": "My Chrome Extension","version": "1.0","description": "这是一个简单的 Chrome 插件示例","permissions": ["activeTab", "scripting"], // 必要权限"action": {"default_popup": "popup.html", // 点击插件图标时显示的页面"default_icon": "icons/icon.png"},"background": {"service_worker": "background.js" // 背景脚本},"content_scripts": [{"matches": ["https://example.com/*"], // 插件将作用于这些网址"js": ["content.js"]}],"icons": {"16": "icons/icon16.png","48": "icons/icon48.png","128": "icons/icon128.png"}}
3. Chrome 插件代码案例
功能描述：高亮特定网页上的关键词
目标：当我们访问某个网页（例如 https://example.com）时，插件会自动将指定的关键词高亮。
1）content.js（内容脚本）
// 在网页内容中查找关键词并高亮const keywords = ["Chrome", "Plugin", "JavaScript"];functionhighlightKeywords() {// 遍历页面中的文本节点const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);let node;while ((node = walker.nextNode())) {keywords.forEach(keyword => {if (node.nodeValue.includes(keyword)) {const span = document.createElement("span");span.innerHTML = node.nodeValue.replace(new RegExp(keyword, "gi"),`<mark>${keyword}</mark>`);node.parentNode.replaceChild(span, node);}});}}highlightKeywords();
2）popup.html（插件弹窗界面）
<htmllang="en"><head><metacharset="UTF-8"><title>插件弹窗</title><style>body { font-family: Arial, sans-serif; padding: 10px; }button { background-color: #4CAF50; color: white; border: none; padding: 10px; cursor: pointer; }button:hover { background-color: #45a049; }</style></head><body><h3>关键词高亮插件</h3><p>已启用关键词高亮功能。</p><buttonid="reload">刷新页面</button><script>document.getElementById('reload').addEventListener('click', () => {chrome.tabs.reload(); // 重新加载当前页面});</script></body></html>
3）运行插件
-
将插件目录加载到 Chrome： -
打开 chrome://extensions。 -
打开“开发者模式”。 -
点击“加载已解压的扩展程序”，选择插件所在目录。 -
打开 https://example.com页面，观察关键词是否高亮。
三、油猴脚本开发入门
1. 安装油猴插件
在 Chrome 浏览器中安装 Tampermonkey 或 Violentmonkey 扩展，这些工具允许我们运行用户脚本。
2. 油猴脚本的基本结构
油猴脚本以元信息开头，指定脚本的基本信息，例如脚本名称、作用的网页等。主要通过 JavaScript 操控网页 DOM。
模板：
// ==UserScript==// @name 示例油猴脚本// @namespace http://tampermonkey.net/// @version 1.0// @description 修改网页内容// @author Your Name// @match https://example.com/*// @grant none// ==/UserScript==(function() {'use strict';// 脚本逻辑代码})();
3. 油猴脚本代码案例
功能描述：自动修改网页标题并在页面顶部添加自定义信息
目标：当访问 https://example.com 时，修改网页标题并在顶部添加一条消息。
代码实现：
// ==UserScript==// @name 自动修改网页标题// @namespace http://tampermonkey.net/// @version 1.0// @description 修改网页标题并添加消息// @author Your Name// @match https://example.com/*// @grant none// ==/UserScript==(function() {'use strict';// 修改网页标题document.title = "新标题 - Example";// 在页面顶部添加一条通知const banner = document.createElement("div");banner.style.backgroundColor = "#4CAF50";banner.style.color = "white";banner.style.padding = "10px";banner.style.textAlign = "center";banner.innerText = "这是一个由油猴脚本插入的消息！";document.body.insertBefore(banner, document.body.firstChild);})();
效果：
-
当你访问 https://example.com时，网页标题将自动更改为新标题 - Example。 -
页面顶部会显示一条绿色背景的通知。
四、Chrome 插件与油猴脚本的对比
| 特性 | Chrome 插件 | 油猴脚本 |
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
· 今 日 推 荐 ·
本文内容来自网络，如有侵权请联系删除
原文始发于微信公众号（逆向有你）：JS逆向 -- Chrome插件与油猴脚本开发详解
免责声明:文章中涉及的程序(方法)可能带有攻击性，仅供安全研究与教学之用，读者将其信息做其他用途，由读者承担全部法律及连带责任，本站不承担任何法律及连带责任；如有问题可邮件联系(建议使用企业邮箱或有效邮箱,避免邮件被拦截，联系方式见首页)，望知悉。
- 左青龙
- 微信扫一扫
-
- 右白虎
- 微信扫一扫
-
评论