Chrome扩展跨页面脚本优化技巧

你在学习文章相关的知识吗？本文《Chrome扩展优化：跨页面脚本执行技巧》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

挑战分析：跨页面脚本执行的困境

在开发 Chrome 扩展时，我们经常会遇到这样的场景：需要在用户点击扩展图标或页面上的某个元素后，执行一系列操作，其中可能包括模拟点击导致页面跳转，然后在新的页面加载完成后继续执行后续逻辑。

最初的尝试可能涉及到以下两步：

1. 在当前页面执行脚本，模拟点击某个按钮，该点击可能导致页面导航。
2. 期望在新页面加载完成后，基于前一步操作的成功与否，执行特定的后续脚本。

常见的问题在于，如何精确地将第二步脚本的执行与第一步的特定操作关联起来，而不是在每次页面加载时都无差别地触发。例如，使用 chrome.runtime.onMessage 在内容脚本中发送消息给 Service Worker，再结合 chrome.tabs.onUpdated 监听页面加载完成事件。

原有方案的局限性：

// 原始的 background.js 片段（存在问题）
try {
    chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
        // 问题：每次收到消息都会添加一个新的 onUpdated 监听器
        chrome.tabs.onUpdated.addListener(function (tabdId, changeInfo, tab) {
            // 问题：onUpdated 监听所有标签页的更新事件，难以精确限定
            if (changeInfo.status == 'complete' && message.action === 'clicked') { 
                chrome.scripting.executeScript({
                    target: { tabId: tab.id },
                    func: () => {
                        alert(document.title);
                    },
                });
            }
        });
    });
} catch (e) {
    alert(e);
}

上述代码存在两个主要问题：

• 重复监听器： 每次 chrome.runtime.onMessage 收到消息时，都会在 Service Worker 中添加一个新的 chrome.tabs.onUpdated 监听器。这意味着如果多次触发消息，将会有多个 onUpdated 监听器同时活跃，导致后续脚本被重复执行，并可能造成内存泄漏。
• 条件判断不精确： chrome.tabs.onUpdated 会监听所有标签页的所有更新事件。虽然尝试通过 message.action === 'clicked' 进行过滤，但实际上，当页面加载完成后，onUpdated 监听器会被触发，而此时 message 对象可能已经不再与当前的页面加载事件直接关联，或者无法有效区分是由于特定操作导致的加载还是用户手动导航导致的加载。这使得后续脚本在非预期情况下也会执行（例如，用户手动导航到任何页面时）。

优化策略：基于返回值和直接注入的解决方案

为了解决上述问题，我们可以采用一种更简洁、更可靠的方法：将初始操作和后续的条件判断逻辑封装在一个函数中，并通过 chrome.scripting.executeScript 直接注入并执行，然后根据该函数的返回值来决定是否执行下一步。这种方法避免了复杂的跨脚本消息传递和全局事件监听器的滥用。

核心思想：

1. 将需要在页面中执行的初始操作（例如，查找元素、填充、点击）封装成一个独立的函数。
2. 该函数执行完毕后，返回一个布尔值（或其他指示操作成功或失败的值）。
3. 在 Service Worker 中，通过 chrome.scripting.executeScript 注入并执行这个函数，并获取其返回值。
4. 根据返回值，在 Service Worker 中直接判断是否需要执行后续的脚本，如果需要，则再次使用 chrome.scripting.executeScript 注入执行。

这种方法将整个逻辑流集中在 Service Worker 的一个事件监听器内部，使其更加顺序化和可控。

代码实现与解析

以下是优化后的 background.js 和不再需要的 claimSubmitStart.js 的整合方案：

manifest.json (Manifest V3):

{
    "name": "PVA WF1",
    "version": "0.1",
    "description": "Working extension but sendMessage portion not functional.",
    "manifest_version": 3,
    "author": "hobbledcobbled",
    "action": {
        "default_title": "PVA WF1"
    },
    "permissions": [
        "storage",
        "activeTab",
        "scripting",
        "tabs"
    ],
    "host_permissions": [
        "https://azdot.gov/home",
        "https://azdot.gov/search" // 添加可能跳转到的页面权限
    ],
    "background": {
        "service_worker": "background.js"
    }
}

说明： host_permissions 中应包含所有可能进行脚本注入的源，这里增加了 https://azdot.gov/search 以覆盖跳转后的页面。

background.js (优化后):

// 封装在页面中执行的初始操作
const claimSubmitStart = () => {
  const searchInput = document.getElementById("edit-keyword");
  const searchBtn = document.getElementById("edit-submit-solr-search");
  if (searchInput && searchBtn) {
    searchInput.value = "license";
    searchBtn.click();
    // 返回 true 表示操作成功，页面将跳转
    return true; 
  } else {
    // 返回 false 表示操作失败（例如，元素未找到）
    return false;
  }
};

// 监听扩展图标点击事件
chrome.action.onClicked.addListener(async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

  // 1. 在当前活跃标签页注入并执行 claimSubmitStart 函数
  // func 选项允许直接注入 Service Worker 中的函数
  const results = await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: claimSubmitStart // 直接注入函数
  });

  // 2. 检查 claimSubmitStart 函数的执行结果
  // results 是一个数组，每个元素对应一个 frame 的执行结果
  if (results && results[0] && results[0].result) {
    // 如果 claimSubmitStart 返回 true，表示操作成功且页面已开始跳转
    // 此时，我们可以在Service Worker中等待页面加载完成，或直接执行后续逻辑。
    // 对于需要等待页面加载完成才能执行的脚本，可以利用 tabs.onUpdated 监听，
    // 但更推荐在目标页面上再次执行一个注入脚本，由该脚本判断当前页面状态。

    // 示例：直接在新页面加载后执行一个alert
    // 注意：这里的 alert 会在页面跳转后执行，但 chrome.scripting.executeScript
    // 通常需要页面加载完成且处于可脚本注入状态才能成功。
    // 对于此场景，如果后续操作确实依赖于新页面完全加载，
    // 更好的做法是让 content script 负责监听 DOMContentLoaded 或 load 事件。
    // 但对于简单的确认，此处的 alert 仍然有效。

    // 如果后续操作需要依赖新页面的DOM，则需要更复杂的逻辑，
    // 例如在跳转后的页面加载完成后再次注入脚本。
    // 但对于本例，如果仅仅是确认点击成功，可以在这里直接执行。
    // 实际应用中，如果页面跳转后需要操作新页面的特定元素，
    // 推荐在新页面加载完成后，再次通过 executeScript 注入一个检查并操作的脚本。

    // 简单起见，这里直接注入一个在当前（或即将跳转到的）页面执行的脚本
    // 实际的alert可能在新页面加载后才显示
    chrome.scripting.executeScript({
      target: { tabId: tab.id }, // 仍然是原来的 tabId，因为页面跳转后 tabId 不变
      func: () => {
        // 此函数将在新页面加载完成后执行
        // 注意：如果页面跳转较快，此处的注入可能发生在页面加载过程中或加载完成之后
        // 确保你的脚本能在新页面上找到目标元素
        alert("页面已加载，标题是：" + document.title);
      }
    });
  } else {
    console.log("初始操作未成功，未找到搜索框或按钮。");
  }
});

代码解析：

1. claimSubmitStart 函数：

   • 这个函数直接定义在 background.js 中，不再是一个单独的文件。
   • 它包含了在当前页面上执行的所有逻辑：查找 searchInput 和 searchBtn 元素，填充值，并模拟点击。
   • 关键在于，它返回一个布尔值：如果成功找到并操作了元素，则返回 true；否则返回 false。这个返回值将被 Service Worker 接收。

2. chrome.action.onClicked.addListener：

   • 当用户点击扩展图标时，此监听器被触发。
   • chrome.tabs.query 用于获取当前活跃的标签页信息。
   • const results = await chrome.scripting.executeScript(...)： 这是核心部分。
     • target: { tabId: tab.id } 指定了脚本注入的目标标签页。
     • func: claimSubmitStart 是一个非常重要的特性。在 Manifest V3 中，你可以直接将 Service Worker 中的一个函数作为 func 参数传递给 executeScript。Chrome 会将这个函数的代码序列化并在目标页面中执行。
     • await 关键字确保 Service Worker 会等待 claimSubmitStart 在页面中执行完毕并返回结果。results 数组的第一个元素 (results[0]) 包含了 claimSubmitStart 函数的返回值（在 result 属性中）。

3. if (results && results[0] && results[0].result)：

   • Service Worker 收到 claimSubmitStart 的返回值后，会检查它是否为 true。
   • 如果为 true，表示前一步的搜索和点击操作成功执行，并且页面已经开始跳转。
   • 此时，Service Worker 就可以根据需要，执行后续的逻辑。在这个例子中，它再次使用 chrome.scripting.executeScript 注入了一个简单的 alert 脚本。由于 executeScript 会等待页面处于可注入状态，这个 alert 通常会在新页面加载完成后才显示。

这种方法的优势：

• 逻辑集中： 整个流程都在 chrome.action.onClicked 监听器内部完成，代码更易于理解和维护。
• 避免重复监听： 不再需要动态添加 onUpdated 监听器，避免了重复执行和内存泄漏问题。
• 精确控制： 通过 executeScript 的返回值，可以精确判断前一步操作是否成功，从而有条件地执行后续步骤。
• 无需 onMessage： 对于这种顺序执行且结果可直接返回的场景，不再需要通过 chrome.runtime.sendMessage 进行跨脚本通信。

注意事项与最佳实践

• Service Worker 生命周期： Service Worker 是事件驱动的，可能会在不活跃时休眠。确保你的逻辑在 Service Worker 唤醒时能够正确执行。
• chrome.scripting.executeScript 的 func 与 files：
  • func 适用于注入 Service Worker 中已定义的函数，代码量不宜过大，且不能直接访问 Service Worker 的全局变量（除非通过闭包或参数传递）。
  • files 适用于注入单独的内容脚本文件（.js 文件），适合复杂的、与页面 DOM 交互较多的逻辑。
• 异步操作与错误处理： 在注入的函数中，如果包含异步操作（如 fetch 请求），请确保正确使用 async/await 或 Promise，并且函数的返回值能准确反映异步操作的最终状态。
• 权限管理： 确保 manifest.json 中声明了必要的权限，如 scripting、activeTab 和 host_permissions，以便扩展能够执行脚本并访问目标网站。
• 复杂跨页面流程： 对于更复杂的跨页面操作（例如，需要在新页面上等待特定元素出现后再进行操作），可以考虑在新页面加载完成后，再次注入一个内容脚本，该脚本负责监听 DOM 变化或等待特定元素，然后向 Service Worker 发送消息，Service Worker 再决定下一步操作。但对于本例这种简单的条件判断，上述方案已足够。

总结

通过将页面操作逻辑封装为可返回结果的函数，并结合 chrome.scripting.executeScript 的 func 选项，我们能够以一种更简洁、高效且可靠的方式实现 Chrome 扩展中的跨页面操作。这种方法避免了传统 onMessage 和 onUpdated 组合可能带来的复杂性和不精确性，使得扩展的逻辑更加清晰，执行更加稳定。在 Manifest V3 的背景下，这种直接的函数注入方式是推荐的实践之一，有助于构建高性能和易于维护的扩展。

本篇关于《Chrome扩展跨页面脚本优化技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！