新手开发者求助：Chrome Extension注入带自定义属性的JavaScript

核心方案：动态创建Script标签注入 #

Requestly默认的外部URL注入方式无法直接添加自定义属性，你可以改用内联脚本动态创建script标签的方式，既能添加data-key/data-id属性，又能保证脚本按顺序执行：

1. 在Requestly中创建「Inject Script」规则，选择「Inline Script」类型
2. 替换成以下模板代码（根据实际需求修改URL和属性值）：

// 创建第一个带自定义属性的外部脚本
const targetScript = document.createElement('script');
targetScript.src = '你的外部脚本地址';
targetScript.dataset.key = '你的data-key值';
targetScript.dataset.id = '你的data-id值';

// 确保第一个脚本加载完成后，再注入第二个脚本
targetScript.addEventListener('load', () => {
  // 注入第二个脚本（如果是外部URL也用createElement，内联则用textContent）
  const secondScript = document.createElement('script');
  secondScript.textContent = `
    // 这里粘贴你的第二个脚本内容
  `;
  document.head.appendChild(secondScript);
});

// 将第一个脚本插入页面
document.head.appendChild(targetScript);

控制台粘贴失败的排查与解决 #

直接在控制台粘贴失败通常是脚本执行时机不对或缺少依赖环境导致：

• 用上面的动态创建方式在控制台执行，确保脚本按顺序加载且属性正确
• 如果脚本依赖页面DOM，可包裹在DOMContentLoaded事件中：

document.addEventListener('DOMContentLoaded', () => {
  // 上面的动态注入代码放这里
});

额外排查点 #

• 检查Requestly的规则URL匹配条件是否覆盖了你要测试的客户网站
• 打开Chrome DevTools的「Network」面板，确认第一个脚本是否成功加载，查看元素属性是否正确
• 核对data-key/data-id的属性值是否与产品要求完全一致，避免拼写错误

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