Chrome扩展程序内容脚本 - 在页面代码之前注入Javascript

Question

I am trying to make a Chrome extension with a content script to inject a script into a webpage before all other scripts in the page . 我正在尝试使用内容脚本制作Chrome扩展程序，以将脚本插入网页中的所有其他脚本之前 。 (I am using the xhook library to intercept XHR requests, which overwrites the XHR class. I need to do this because it is currently impossible to modify responses using Chrome extension APIs .) The "document_start" event is executed before any of the DOM is written, so I manually create the body element with the content script. （我正在使用xhook库来拦截XHR请求，该请求将覆盖XHR类。因为当前无法使用Chrome扩展API修改响应，所以我需要这样做。）在任何DOM被执行之前，都会执行“ document_start”事件写的，所以我用内容脚本手动创建body元素。 However, this creates 2 body tags in the HTML, which appears to make variables defined within the injected script tag inaccessible to the code in the main page. 但是，这会在HTML中创建2个正文标记，这似乎会使注入的脚本标记中定义的变量无法访问主页面中的代码。

How should I do this? 我该怎么做？

I have simplified version of my code below: 我在下面简化了我的代码版本：

manifest.json 的manifest.json

{
    // Required
    "manifest_version": 2,
    "name": "My Extension",
    "version": "0.1",
    "description": "My Description",
    "author": "Me",
    "permissions": ["https://example.com/*"],
    "content_scripts": [{
            "matches": ["https://example.com/*"],
            "js": ["xhook.js"],
            "run_at": "document_start",
            "all_frames": true
        }
    ]
}

xhook.js xhook.js

var script_tag = document.createElement('script');
script_tag.type = 'text/javascript';
holder = document.createTextNode(`

//Xhook library code
// XHook - v1.4.9 - https://github.com/jpillora/xhook
//...

//Now to use the library
console.log('loading extension');
xhook.after(function (request, response) {
    //console.log(request.url);
    if (request.url.startsWith("https://example.com/")) {
        var urlParams = new URLSearchParams(window.location.search);
        fetch('https://example.com/robots.txt')
        .then(
            function (apiresponse) {
            if (apiresponse.status == 200) {
                response.text = apiresponse.text();
                return;
            };
            if (apiresponse.status !== 200) {
                console.log('File not found. Status Code: ' +
                    apiresponse.status);
                return;
            };
        });
    };
});
xhook.enable();`);
script_tag.appendChild(holder);
document.body = document.createElement("body");
document.head.appendChild(script_tag);

Thanks! 谢谢！

Answer 1

If the extension is loaded at document_start , document.head = null . 如果扩展名是在document_start加载的，则document.head = null 。 Hence, to overcome this, do - document.lastChild.appendChild(script_tag); 因此，要克服这一点，请执行 - document.lastChild.appendChild(script_tag); . 。 This creates a script tag in your <html> hierarchy. 这会在<html>层次结构中创建一个脚本标记。 Hope this helps. 希望这可以帮助。

Also, Could you please tell why are you doing the following statement document.body = document.createElement("body"); 另外，你能告诉我你为什么要做以下声明document.body = document.createElement("body"); I believe this is not required. 我认为这不是必需的。

Chrome扩展程序内容脚本 - 在页面代码之前注入Javascript

问题描述

1 个解决方案

解决方案1
0 2019-06-28 16:50:22

Chrome扩展程序内容脚本 - 在页面代码之前注入Javascript

问题描述

1 个解决方案

解决方案1 0 2019-06-28 16:50:22

解决方案1
0 2019-06-28 16:50:22