在网页上注入 JavaScript（一个或多个）的 Chrome 扩展

Question

我是一名初级 Web 开发人员，第一次使用 Stackoverflow。我需要 Chrome 扩展程序的帮助来在网页上注入 javascript。这有助于我在潜在客户的网站上测试我公司的产品。

我面临一个问题。我无法找到一个好的 Chrome 扩展来在网页上注入脚本。

这就是我公司的 javascript 代码的样子，它进入客户网站。

// First Script Block
<script type="text/javascript" 
    src="https://my-staging-website.com/main.js" 
    data-key="{{key}}" 
    data-id="{{some_Id}}> // not able to add these properties in requestly
</script>

// Second Script Block (Should run after the script is loaded from URL)
const app = new AppSDK();
app.init({ ... });
app.identify({ ... });

出于隐私原因，我删除了一些细节。

我尝试了几个 Chrome 扩展，最终选择了 Requestly Chrome 扩展来注入脚本。它部分解决了问题。我能够在 Requestly 中添加两个脚本块，并且它一个接一个地运行它们，这就是我想要的，但是我无法将属性/属性 data-key、data-id 添加到第一个脚本块，即从 URL 加载。

这是我的请求配置

有什么办法可以解决这个问题吗？我是初学者，所以我可能会错误地使用工具。我也尝试将代码直接复制并粘贴到Chrome开发工具控制台中，但没有成功。 Requestly 能够注入并运行脚本，但无法添加属性，否则我会收到错误

Answer 1

目前还不存在向脚本 URL 添加属性/属性的功能。这是 github 存储库中的功能请求。

作为临时解决方法，您可以在 Requestly 的插入脚本功能中使用自定义代码选项而不是 URL 选项，并创建脚本块来加载带有属性的脚本。

这是您可以尝试的示例代码

const script = document.createElement('script');
script.type="text/javascript"
script.src = <script_url>;
script.setAttribute("data-id", "{{your_data_id}}");
script.setAttribute("data-key", "")

您可以保持第二个脚本块不变，它应该可以正常工作。是的，有一些手动工作，但是当您将其粘贴到 Chrome Devtools 中时，这种方法也应该有效。