javascript - 如何从后台注入内容脚本

Question

我正在尝试注入我的内容脚本（存储在本地主机中），而不必使用清单。

背景.js：

chrome.browserAction.onClicked.addListener(function (event) {
    show_floater = !show_floater;
    // so that there is no need of adding it in the manifest
    chrome.tabs.executeScript(null, {
        // file: 'js/content_t.js', /* my content script */ }, () => {
        file: 'https://127.0.0.1/js/test1.js', /* my content script */}, () => {
        connect(show_floater) //this is where I call my function to establish a connection     
        });
    });
});

正如您在上面看到的，有一部分代码被注释掉了。我以前就是这样做的。我曾经注入一个 js 文件，然后从那里将文件注入到 DOM 的本地主机中。

但是考虑一下应该有一种方法可以将文件号减少到 2 而不是 3 对吗？我尝试简单地更改我从后台脚本注入的文件，但它似乎不起作用......（我在要注入的文件中放置了一个 console.log，但我什么也看不到）。

需要将文件存储在服务器上的原因是我可以更改扩展程序的代码，而无需在用户端推送更新。我只是在服务器中更改它，下次用户使用它时，它会注入最新版本。

函数 connect 向活动选项卡发送消息

function connect(sf) {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
        const port = chrome.tabs.connect(tabs[0].id);
        let msg = {show_floater: sf};
        port.postMessage(JSON.stringify(msg));
    });
}

我对这一切都很陌生

这是我的内容脚本中的内容：

内容.js：

console.log('hello');

chrome.runtime.onConnect.addListener(function (port) {
    port.onMessage.addListener(function (msg) {
        msg = JSON.parse(msg);
        if (!injected) {
            injected = true;

            let link = document.createElement('link');
            document.querySelector('head').appendChild(link);
            link.className = 'beebole_css';
            link.href = 'https://127.0.0.1/css/test.css';
            link.type = 'text/css';
            link.rel = 'stylesheet';

            $$beebole_button$.insert_DOM_button();
            $$beebole_button$.add_button_functionality();
            // let s = document.createElement('script');
            // document.querySelector('body').appendChild(s);
            // s.className = 'beebole_js';
            // s.src = 'https://127.0.0.1/js/test.js';
            // s.type = 'text/javascript';
        }
    });
});

同样，注释掉的部分是我以前做的。我只是用来从本地主机注入文件作为脚本。现在我所做的只是调用函数来将我需要的内容添加到 DOM 中。

这可能是矫枉过正，但这里的功能：

$$beebole_button$.insert_DOM_button = function () {
    // Main divs
    let div_container = document.createElement('div');
    let div_button = document.createElement('div');
    let div_form = document.createElement('div');

    // User input
    let txt_field = document.createElement('textarea');
    let submuit_comment_button = document.createElement('button');
    let select_project = document.createElement('input');

    // SVGs
    let beebole_svg = document.createElement('div');
    let mag_glass_svg = document.createElement('div');

    div_button.className = 'beebole_menu1';

    beebole_svg.className = 'beebole_logo';
    div_button.append(beebole_svg);

    select_project.className = 'beebole_select_project beebole_text_input';
    select_project.placeholder = 'Select project...';
    mag_glass_svg.className = 'beebole_mag_glass';
    select_project.appendChild(mag_glass_svg);

    div_form.appendChild(select_project);

    // txt_field.type = 'text';
    txt_field.className = 'beebole_comment beebole_text_input';
    // txt_field.rows = '5';
    txt_field.placeholder = window.$$beebole_button$.autoComment() || 'Enter comment here...';
    div_form.appendChild(txt_field);

    submuit_comment_button.type = 'button';
    submuit_comment_button.className = 'beebole_submuit_comment beebole_button';
    submuit_comment_button.innerHTML = 'submuit';

    div_form.appendChild(submuit_comment_button);
    div_form.className = 'beebole_form hidden';

    div_container.className = 'beebole beebole_default_position';
    div_container.setAttribute('tabIndex', '1');
    div_container.appendChild(div_button);
    div_container.appendChild(div_form);

    document.body.appendChild(div_container);
};

$$beebole_button$.add_button_functionality() 就是它所说的 -> 按钮拖动、移动等的逻辑。

标签： javascriptgoogle-chromegoogle-chrome-extensioncontent-script