标签: content-script

我正在编写一个 Chrome 扩展程序，为用户访问的某些页面添加功能。
为此，我需要注入页面需要能够调用的一些变量和函数。
这些变量/函数是在内容脚本中生成的。

但是，由于内容脚本在隐蔽的环境中运行，因此主机页面无法访问它。

根据这篇文章： http://code.google.com/chrome/extensions/content_scripts.html#host-page-communication 内容脚本和主机页面可以通过添加事件通过 DOM 进行通信。
但这是一种可怕的做事方式，我真的很想看到一些轻松注入方法/变量的方法。

有这样的可能吗？

谢谢！

我正在尝试从用户正在查看的页面中提取数据并将该数据发送到扩展程序弹出窗口.我在从当前页面提取信息时遇到了麻烦.在查看Google代码教程后,我设置了清单和内容脚本,如下所示.当我转到具有id ="comments"的跨度的测试页面时,来自注入的内容脚本的变量总是最终为null.谁知道我可能会失踪？谢谢!

manifest.json
=================
{
    "name": "Sample Extension",
    "version": "0.0.1",
    "description": "Sample extension",
    "icons": {"128": "icon.png"},
    "permissions": [
        "tabs", "<all_urls>"
    ],
    "browser_action": {
        "default_icon": "browseraction.png",
        "default_title": "Sample",
        "popup": "popup.html"
    },
    "content_scripts": [
        {
            "matches": ["http://*/*", "<all_urls>" ],
            "js": ["scripts/contentscript.js"]
        }
    ]
}

contentscript.js
===================
var comments = document.getElementById("comments");
alert( comments.innerText );

我正在尝试为 chrome 制作一个扩展，将 html 代码注入特定页面上的特定 div。

这是我想注入一些代码的示例页面：http : //netdna.webdesignerdepot.com/uploads7/creating-a-modal-window-with-html5-and-css3/demo.html

到目前为止，我已经做到了：manifest.json：

{
"manifest_version":         2,
"content_scripts":          [ {
    "js":       [ "iframeInjector.js" ],
    "matches":  [   "http://netdna.webdesignerdepot.com/*/*/*"
    ]
} ],
"description":              "Inject html",
"name":                     "Inject html",
"version":                  "1",
"web_accessible_resources": ["test.html"]
}

测试.html：

Test html code

iframeInjector.js：

var iframe  = document.createElement ("iframe");
iframe.src  = chrome.extension.getURL ("test.html");
document.body.insertBefore (iframe, document.body.openModal);

在示例页面上有一个名为“openModal”的 div，如何将我的 html 代码注入到该 div 中？

另一个问题：有没有办法将页面标题读取到变量并在我感染的 html 代码中使用该变量？

谢谢..

我为 chrome 和 firefox 制作了一个浏览器扩展。firefox 是使用Web 扩展 API开发的因此这两个扩展中的代码差异很小。作为扩展中的一个重要功能，一些 HTML 元素通过内容脚本成为网页的一部分。这还涉及加载托管在某些服务器上并通过 https 提供的图像。现在，当扩展在 twitter 和 github 上运行时，这些图像在 chrome 中加载良好。但是，有趣的是，当相应的扩展在 twitter 和 github 上运行时，图像根本没有加载到 firefox 中。更有趣的是，twitter 在其响应标头中设置的内容脚本策略禁止该图像加载，因此 firefox 的行为是正确的。所以，我的问题基本上是 Chrome 是否在这里违反了 CSP？

在此处附加 twitter 设置的 csp--

script-src 'nonce-j0G​​K1zjoBy82/ZWhR7gw+g==' https://connect.facebook.net https://cm.g.doubleclick.net https://ssl.google-analytics.com https://graph .facebook.com https://twitter.com 'unsafe-eval' https:// .twimg.com https://api.twitter.com https://analytics.twitter.com https://publish.twitter。 com https://ton.twitter.com https://syndication.twitter.com https://www.google.com https://t.tellapart.com https://platform.twitter.com https:// www.google-analytics.com '自我'；框架祖先“自我”；字体-SRC https://twitter.com的https：// .twimg.com数据：https://ton.twitter.com https://fonts.gstatic.com https://maxcdn.bootstrapcdn.com https://netdna.bootstrapcdn.com 'self'; media-src https://twitter.com https:// .twimg.com https://ton.twitter.com blob: 'self'; connect-src https://graph.facebook.com https:// .giphy.com https:// …

我有一个使用 iFrame 嵌入网站的扩展，我想在其中注入一个内容脚本来修改框架内的页面，我已经设法使用以下方法做到这一点：

"content_scripts": [{
    "matches": ["http://website/*"],
    "js": ["js/jquery/jquery-3.2.1.min.js", "src/myScriptToInject.js"],
    "all_frames": true,
    "run_at": "document_start"
}],

它按预期工作，但问题是如果我现在访问原始网站，它自然会将我的脚本注入其中，使其完全损坏。

所以我尝试使用chrome.tabs.executeScript(tab.id, {allFrames: true, runAt: 'document_start', file: 'src/myScriptToInject.js'});，但问题是，如果我理解正确，出于“安全原因”，我无法在 chrome 扩展中注入脚本。

有没有我没有想到的方法或技巧可以帮助我？

我正在尝试通过更改嵌入在视频的html观看页面中的player_api脚本内部的一些变量来更改YouTube播放器的某些行为。

问题是，无论我如何尝试，播放器的嵌入式脚本始终会在我的扩展程序对其进行修改之前运行。因此，保持玩家的行为相同。

我尝试将清单中的run_at属性设置为document-start，但是脚本根本没有运行。

在更改脚本之前，我该怎么做才能停止执行该脚本？

PS：我尝试通过截获html调用并使用Charles Proxy编辑正文来更改脚本，然后按我的意愿更改了播放器的行为。因此，它知道，如果在正确的时间完成，它应该可以工作。

。

manifest.json

{
    "manifest_version": 2,
    "name": "YouFit For YouTube",
    "version": "1",
    "content_scripts": [{
        "js": ["content.js"],
        "matches": ["https://*.youtube.com/watch?*",
        "https://*.youtube.com/watch?*"],
    }],
    "browser_action": {
        "default_icon": "icon.png"
    }
}

content.js

function changeBehavior() {
    var scriptElements = document.getElementsByTagName('script');
    for (var i = 14; i < scriptElements.length; i++) {
        var curScriptBody = scriptElements[i].outerHTML;
        // Find the script i'm interested in
        if (curScriptBody.indexOf("var ytplayer") != -1) {
            scriptElements[i].outerHTML = scriptElements[i].outerHTML.replace("<text>", "<replacement …

我有一个 chrome 扩展。我在内容脚本中有很多代码。现在谷歌需要很多时间来发布扩展。由于 covid 等原因，大约需要 10-15 天。我在 Firefox 上也有相同的扩展，我通过脚本注入加载所有远程代码。如何使用 Chrome 扩展程序执行相同操作？当我尝试加载远程脚本时，它给了我以下错误。

本文档需要“TrustedScript”分配。

我认为 Chrome 随着 83 版的发布变得更加严格。此外，根据 ChromeStore 支持，远程加载代码的包装器是可行的方法。但我找不到合适的文档或示例代码。在 Stackoverflow 上发现的问题至少有 4-5 年的历史。

此外，一些人认为，如果我们注入远程脚本，Chrome 商店将拒绝该扩展程序。但下图属于 Chrome Developer Dashboard 的提交扩展 UI。

您可以清楚地看到我说的是您的应用程序是否需要远程代码。

任何帮助都受到高度赞赏。

我正在开发一个Chrome扩展程序，它将根据以下清单加载内容脚本：

"content_scripts" : [
    {
      "matches" : [ "<all_urls>" ],
      "js" : [  "scripts/namespace/namespace.js",
                "scripts/log/Logger.js"]
       "run_at" : "document_start",
       "all_frames" : true
     }
]

有一个样机站点，其HTML是：

<html>
<head>
<script language=javascript>
    var test;

    function makewindow() {
        test=window.open('mywin');
        test.window.document.write("<html><body><A onclick=window.close(); href= > click Me to Close</A>");
        test.window.document.write(" ---- </body></html>");
    }
</script>

</head>
<body>
<a href="" onclick="makewindow();return false;" >Click me to launch the external Window</a>
</body>
</html>

如果我单击A链接，它将运行makewindow功能并弹出一个新窗口。

新窗口的URL为about:blank，并且内容脚本未加载到该新窗口中。

如何在新窗口中加载内容脚本？

我正在使用内容脚本将一些HTML注入网页.我正在尝试使用谷歌字体,CabinCondensed-Regular,以及从IcoMoon获得的一些图标字体.我已经下载的文件和我,包括他们与CSS @font-face,因为我可以告诉它的速度更快,但我不知道如何将它们纳入在manifest.json.通常你可以通过"content_scripts"指定一个文件:[

{
    "matches": [ "<all_urls>"],
    "css":["style.css", "jquery-ui.css"],
    "js":["jquery-2.1.0.min.js", "index.js", "jquery-ui.min.js"],
}

但据我所知,字体没有特定的标签,那么如何包含ttf文件呢？

我正在开发浏览器扩展/附加组件。我们可以在Chrome浏览器中运行它，因此我正在尝试使其在Firefox中运行。

我已将加载项加载到Firefox Developer Edition 49.0a2（2016-07-25）中。

我的扩展程序涉及一个content_script设置为run_at: document_start，因此它可以在运行其他页面脚本之前注入一个脚本标记，从而可以使一个对象可全局用于网站。

在Chrome浏览器中，这似乎工作正常，但在Firefox中，这已证明是一种竞争状况，其他时间大多数页面优先加载页面资源。

是否有一种策略来加载内容脚本，使其可以在运行任何其他页面脚本之前注入并加载脚本？

当我添加日志时，我可以很好地隔离正在发生的事情。在此示例中，内容脚本为：

// inject in-page script
console.log('STEP 1, this always happens first')
var scriptTag = document.createElement('script')
scriptTag.src = chrome.extension.getURL('scripts/inpage.js')
scriptTag.onload = function () { this.parentNode.removeChild(this) }
var container = document.head || document.documentElement
// append as first child
container.insertBefore(scriptTag, container.children[0])

现在，如果文件scripts/inpage.js只是运行日志，例如

console.log('STEP 2, this should always run second')

我访问了一个带有如下脚本的页面：

console.log('Step 3, the page itself, should run last')

实际上，步骤2和步骤3以不确定的顺序运行。

非常感谢！

如果您敢自己尝试，我在特殊分支的公共存储库中有脚本的Firefox兼容版本：https : //github.com/MetaMask/metamask-plugin/tree/FirefoxCompatibility