Manifest V2转V3：Scripting API多脚本执行优化方案咨询

针对你提到的7-8个同类DOM查询脚本，无需为每个选择器单独编写函数，推荐以下几种优化方案：

方案1：通用查询函数+参数传递 #

编写一个通用的DOM文本获取函数，通过args参数传入不同选择器，实现代码复用：

// 通用函数：根据选择器获取元素文本
function getElementText(selector) {
  // 可选链避免元素不存在时抛出错误
  return document.querySelector(selector)?.textContent;
}

// 调用示例1：获取收货地址文本
chrome.scripting.executeScript(
  {
    target: { tabId: tab.id },
    func: getElementText,
    args: ["#recv_address > span"] // 传入目标选择器
  },
  display_location
);

// 调用示例2：获取订单总价文本
chrome.scripting.executeScript(
  {
    target: { tabId: tab.id },
    func: getElementText,
    args: ["#order_total .price"]
  },
  display_total_price
);

这种方式完全符合Manifest V3规范，同时避免重复编写相似函数，降低维护成本。

方案2：扩展通用DOM操作函数 #

如果你的脚本不止是获取文本，还涉及取属性、修改DOM等操作，可以写一个更灵活的通用函数：

function handleDomOperation(config) {
  const { selector, action, prop } = config;
  const element = document.querySelector(selector);
  if (!element) return null;

  switch(action) {
    case 'getText':
      return element.textContent;
    case 'getAttribute':
      return element.getAttribute(prop);
    case 'setValue':
      element.value = prop;
      return true;
    // 可根据需求扩展更多操作类型
  }
}

// 调用示例：获取链接的href属性
chrome.scripting.executeScript(
  {
    target: { tabId: tab.id },
    func: handleDomOperation,
    args: [{ selector: "#detail_link", action: "getAttribute", prop: "href" }]
  },
  handle_detail_link
);

方案3：复用独立脚本文件 #

如果脚本逻辑更复杂，可以把所有通用DOM操作封装到单独文件（比如dom-utils.js），然后通过files参数引入：

// dom-utils.js 内容
function getElementText(selector) {
  return document.querySelector(selector)?.textContent;
}

function getElementAttr(selector, attr) {
  return document.querySelector(selector)?.getAttribute(attr);
}

调用时先引入文件，再执行对应函数：

chrome.scripting.executeScript(
  {
    target: { tabId: tab.id },
    files: ["dom-utils.js"]
  },
  () => {
    // 执行文件中的函数
    chrome.scripting.executeScript(
      {
        target: { tabId: tab.id },
        func: () => getElementText("#recv_address > span")
      },
      display_location
    );
  }
);

对比Manifest V2的优势 #

相比MV2中直接传入字符串代码的方式，MV3的func+args写法更安全（避免代码注入风险），同时通过函数复用大幅减少重复代码，更易维护。

内容的提问来源于stack exchange，提问作者ks_