Chrome 扩展程序中的后台脚本与内容脚本

js Chrome

1个回答

写回答

橙.

2025-07-01 01:05

+ 关注

Chrome
Chrome

Chrome 扩展程序是一种可以增强 Chrome 浏览器功能的工具。它可以通过后台脚本与内容脚本来实现各种功能，为用户提供更好的浏览体验。下面我们将分别介绍后台脚本与内容脚本的作用以及如何使用它们来开发 Chrome 扩展程序。

## 后台脚本

后台脚本是在 Chrome 扩展程序后台运行的脚本。它可以访问浏览器的各种 API，包括管理扩展程序的生命周期、与其他扩展程序进行通信、与浏览器标签页进行交互等。后台脚本通常用于处理一些需要在后台运行的任务，如与服务器进行数据交互、定时执行某些操作等。

下面是一个简单的后台脚本示例：

Javascript
// 后台脚本示例
// 当扩展程序被安装或更新时触发
Chrome.runtime.onInstalled.addListener(function() {
  console.log('扩展程序已安装或更新');
});
// 当收到来自内容脚本的消息时触发
Chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  console.log('收到来自内容脚本的消息：', message);
  // 向内容脚本发送消息
  sendResponse('已收到消息');
});

在上面的示例中，我们使用了 Chrome.runtime.onInstalled 事件来监听扩展程序的安装或更新事件，并在控制台输出相应的信息。另外，我们还使用了 Chrome.runtime.onMessage 事件来监听来自内容脚本的消息，并在控制台输出消息内容，然后通过 sendResponse 方法向内容脚本发送响应消息。

## 内容脚本

内容脚本是在网页上下文中运行的脚本，它可以访问网页的 DOM、修改网页的样式和内容，以及与后台脚本进行通信。内容脚本通常用于对网页进行操作和注入一些自定义的功能。

下面是一个简单的内容脚本示例：

Javascript
// 内容脚本示例
// 向后台脚本发送消息
Chrome.runtime.sendMessage('Hello, background script!', function(response) {
  console.log('收到来自后台脚本的响应：', response);
});
// 修改网页标题
document.title = '我是一个 Chrome 扩展程序';

在上面的示例中，我们使用了 Chrome.runtime.sendMessage 方法向后台脚本发送消息，并在控制台输出响应结果。另外，我们还使用了 document.title 属性来修改网页的标题。

## 开发 Chrome 扩展程序的步骤

开发 Chrome 扩展程序通常需要以下步骤：

1. 创建一个文件夹，用于存放扩展程序的文件。

2. 在文件夹中创建一个 manifest.JSon 文件，用于描述扩展程序的配置信息，包括名称、版本、图标、权限等。

3. 创建后台脚本和内容脚本的文件，分别编写相应的功能代码。

4. 在 manifest.JSon 文件中配置后台脚本和内容脚本的文件路径。

5. 在 Chrome 浏览器中打开扩展程序管理页面，加载正在开发的扩展程序文件夹。

6. 在浏览器中测试和调试扩展程序。

## 案例代码

下面是一个简单的 Chrome 扩展程序案例，该扩展程序可以在浏览器中显示当前网页的标题和 URL：

1. 创建一个文件夹，并在文件夹中创建以下文件：

- manifest.JSon 文件：

JSon
     {
       "manifest_version": 2,
       "name": "网页信息",
       "version": "1.0",
       "permissions": ["tABS"],
       "background": {
         "scripts": ["background.JS"],
         "persistent": false
       },
       "content_scripts": [
         {
           "matches": ["<all_urls>"],
           "JS": ["content.JS"]
         }
       ],
       "browser_action": {
         "default_icon": {
           "16": "icon16.png",
           "48": "icon48.png"
         },
         "default_title": "网页信息",
         "default_popup": "popup.html"
       }
     }

- background.JS 文件：

Javascript
     Chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
       if (message === 'getTabInfo') {
         Chrome.tABS.query({ active: true, currentWindow: true }, function(tABS) {
           if (tABS && tABS.length > 0) {
             var tab = tABS[0];
             sendResponse({
               title: tab.title,
               url: tab.url
             });
           }
         });
       }
       return true;
     });

- content.JS 文件：

Javascript
     Chrome.runtime.sendMessage('getTabInfo', function(response) {
       if (response) {
         var info = '标题：' + response.title + '\nURL：' + response.url;
         alert(info);
       }
     });

2. 准备扩展程序所需的图标文件（icon16.png 和 icon48.png），保存在文件夹中。

3. 创建一个 popup.html 文件，并在文件中编写以下代码：

html
   <!DOCTYPE html>
   <html>
   <head>
     <title>网页信息</title>
     <style>
       body {
         width: 200px;
         padding: 10px;
       }
     </style>
   </head>
   <body>
     <h1>当前网页信息</h1>
     
<img src="https://img.izhida.com/topic/c566ca59602c7c5c0d3fe5e18ade447d.jpg" alt="服务器"><br>服务器
正在获取...
   
     <script src="popup.JS"></script>
   </body>
   </html>

4. 创建一个 popup.JS 文件，并在文件中编写以下代码：

Javascript
   Chrome.runtime.sendMessage('getTabInfo', function(response) {
     if (response) {
       var info = '标题：' + response.title + '<br>URL：' + response.url;
       document.getElementById('info').innerHTML = info;
     }
   });

5. 在浏览器中打开扩展程序管理页面（Chrome://extensions/），开启开发者模式，并点击“加载已解压的扩展程序”按钮，选择扩展程序文件夹。

6. 在浏览器工具栏中会出现一个扩展程序图标，点击图标即可显示当前网页的标题和 URL。

通过以上步骤，我们就成功开发了一个简单的 Chrome 扩展程序，并实现了获取当前网页信息的功能。你可以根据自己的需求扩展和修改这个案例，开发出更加丰富和实用的 Chrome 扩展程序。

举报有用（4）分享收藏

Chrome 扩展程序中的后台脚本与内容脚本

1个回答

橙.

热门话题

相关问题