chrome插件开发之API解析-chrome.scripting.executeScript()

在使用 manifest_version": 3 开发 Chrome 扩展时，chrome.scripting.executeScript 是一个非常重要的 API，用于在目标标签页中注入 JavaScript 脚本。以下是对该 API 的校对和解释：

基本用法

chrome.scripting.executeScript 是一个异步函数，返回一个 Promise。它可以将 JavaScript 代码注入到指定的标签页中，从而实现动态修改页面内容、与页面交互等功能。

参数

• injection: ScriptInjection：一个对象，包含以下可选属性：
  • target：指定脚本注入的目标。可以是一个 Tab 对象，也可以是一个包含 tabId 和 allFrames 的对象。tabId 指定要注入脚本的标签页 ID，allFrames 是一个布尔值，如果为 true，则在所有框架中注入脚本，默认为 false。
  • files：一个字符串数组，指定要注入的脚本文件路径。
  • func：一个函数，该函数将在页面上下文中执行。
  • args：一个数组，包含传递给 func 的参数。
  • world：指定脚本注入的上下文。可以是 MAIN（主页面上下文）或 ISOLATED（隔离的上下文，默认值）。

返回值

• Promise<InjectionResult[]>：一个 Promise，解析为一个数组，包含每个注入脚本的结果。每个结果是一个对象，包含以下属性：
  • frameId：注入脚本的框架 ID。
  • result：脚本执行的结果。

示例代码

示例 1：注入一个函数

// 在背景脚本中
chrome.action.onClicked.addListener(async (tab) => {
  try {
    const results = await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      func: () => {
        // 修改页面背景色为黄色
        document.body.style.backgroundColor = 'yellow';
        return document.title; // 返回页面标题
      },
    });
    console.log('Page title:', results[0].result);
  } catch (error) {
    console.error(error);
  }
});

示例 2：注入一个脚本文件

// 在背景脚本中
chrome.action.onClicked.addListener(async (tab) => {
  try {
    await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      files: ['content.js'], // 要注入的脚本文件
    });
    console.log('Script injected successfully');
  } catch (error) {
    console.error(error);
  }
});

示例 3：传递参数给注入的函数

// 在背景脚本中
chrome.action.onClicked.addListener(async (tab) => {
  try {
    await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      func: (message) => {
        // 在页面中显示传递的消息
        alert(message);
      },
      args: ['Hello from extension!'], // 传递参数
    });
    console.log('Message displayed successfully');
  } catch (error) {
    console.error(error);
  }
});

运用场景

1. 修改页面内容：可以使用 chrome.scripting.executeScript 注入脚本，动态修改页面的 DOM 结构，比如更改样式、添加元素等。
2. 与页面交互：注入的脚本可以访问页面的全局变量和函数，实现与页面的交互。
3. 数据获取：可以从页面中获取数据，比如页面标题、输入框的值等，并将这些数据传递回扩展进行处理。
4. 动态注入内容脚本：在某些情况下，可能需要根据用户操作动态注入内容脚本，而不是在扩展安装时就注入。

注意事项

1. 权限：使用 chrome.scripting.executeScript 需要在 manifest.json 中声明 "scripting" 和 "activeTab" 权限。

   {
     "permissions": ["scripting", "activeTab"]
   }
   

2. 异步操作：chrome.scripting.executeScript 是一个异步操作，可以使用 async/await 或 Promise 来处理。
3. 上下文隔离：默认情况下，注入的脚本运行在隔离的上下文中，这意味着它不能直接访问页面的全局变量。如果需要访问页面的全局变量，可以将 world 设置为 "MAIN"。
4. 错误处理：在使用 chrome.scripting.executeScript 时，需要注意错误处理。如果注入脚本失败，Promise 会捕获错误信息。

通过合理使用 chrome.scripting.executeScript，你可以实现许多强大的功能，比如动态修改网页内容、与网页交互等。