谷歌浏览器插件页面注入功能应用实例-增强网页交互体验

谷歌浏览器插件页面注入功能应用实例

来源：Chrome浏览器官网 时间：2025/06/30

谷歌浏览器插件页面注入功能应用实例1

以下是谷歌浏览器插件页面注入功能应用实例：
一、实现自定义样式注入
1. 创建插件项目：在本地创建一个文件夹，用于存放插件的相关文件。在该文件夹中，创建一个`manifest.json`文件，这是插件的配置文件。在`manifest.json`中，定义插件的基本信息，如名称、版本、描述等，并指定插件的权限和需要注入的页面范围。例如，若希望插件在所有网页上都能注入样式，可在权限中添加`"permissions": ["activeTab"]`，在内容脚本部分添加`"content_scripts": [{"matches": [""], "js": ["content.js"]}]`。
2. 编写样式文件：在插件文件夹中，创建一个CSS文件，用于编写自定义样式。例如，可创建一个名为`styles.css`的文件，在其中定义一些样式规则，如改变网页文字的颜色、字体大小等。
3. 编写内容脚本：在插件文件夹中，创建一个JavaScript文件，如`content.js`。在该文件中，使用`chrome.runtime.sendMessage`方法与插件的后台脚本进行通信，获取样式文件的内容。然后，通过创建``标签，将样式内容插入到网页的head部分，实现自定义样式的注入。例如，在`content.js`中编写代码：`chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {if (message.type === 'getStyles') {var link = document.createElement('link');link.rel = 'stylesheet';link.href = chrome.runtime.getURL('styles.css');document.head.appendChild(link);`。
4. 加载插件：在谷歌浏览器中，打开“扩展程序”页面（可通过地址栏输入`chrome://extensions/`访问），开启“开发者模式”。点击“加载已解压的扩展程序”按钮，选择之前创建的插件文件夹，将插件加载到浏览器中。此时，访问任意网页，插件会自动注入自定义样式，改变网页的外观。
二、添加自定义脚本功能
1. 创建插件项目：按照上述创建插件项目的方法，创建一个新的插件文件夹，并编写`manifest.json`文件。在权限和内容脚本配置中，确保插件有在指定页面注入脚本的权限。例如，若只希望在特定域名的网页上注入脚本，可在`matches`中指定相应的域名。
2. 编写脚本文件：在插件文件夹中，创建一个JavaScript文件，如`script.js`。在该文件中，编写需要注入到网页中的脚本代码。例如，可编写一个脚本，实现在网页上自动点击某个按钮的功能。代码如下：`document.addEventListener('DOMContentLoaded', function() {var button = document.getElementById('targetButton');if (button) {button.click(););br /> 3. 修改内容脚本：在`content.js`文件中，使用`chrome.runtime.sendMessage`方法与后台脚本通信，获取脚本文件的内容。然后，通过创建``标签，将脚本内容插入到网页的body部分，实现自定义脚本的注入。例如，在`content.js`中编写代码：`chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {if (message.type === 'getScript') {var script = document.createElement('script');script.src = chrome.runtime.getURL('script.js');document.body.appendChild(script);`。
4. 加载插件并测试：将插件加载到谷歌浏览器中，访问指定域名的网页，插件会自动注入自定义脚本，实现自动点击按钮等功能。
三、实现数据提取与处理
1. 创建插件项目：创建插件文件夹及`manifest.json`文件，设置插件的权限和内容脚本配置，使其能够在需要提取数据的页面上运行。
2. 编写数据提取脚本：在插件文件夹中，创建一个JavaScript文件，如`extractor.js`。在该文件中，编写代码来提取网页中的特定数据。例如，若需要提取网页中的标题和所有链接文本，可编写如下代码：javascript document.addEventListener('DOMContentLoaded', function() {var title = document.title;var links = [];var anchors = document.getElementsByTagName('a');for (var i = 0; i < anchors.length; i++) {links.push(anchors[i].textContent);}chrome.runtime.sendMessage({type: 'extractedData', title: title, links: links});});
3. 修改内容脚本和后台脚本：在`content.js`文件中，调用`extractor.js`脚本，并将提取到的数据通过`chrome.runtime.sendMessage`方法发送给后台脚本。在后台脚本中，接收数据并进行进一步处理，如将数据存储到本地或发送到服务器。例如，在`background.js`中编写代码：javascript chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {if (message.type === 'extractedData') {console.log('Page Title:', message.title);console.log('Links:', message.links);//可将数据存储或发送到服务器);
4. 加载插件并测试：将插件加载到谷歌浏览器中，访问目标网页，插件会自动提取数据并进行处理。

上一篇: Google Chrome插件是否支持浏览器主题切换下一篇: 谷歌浏览器浏览器启动速度如何提升