如何解决如何从后台注入内容脚本
我正在尝试注入我的内容脚本(存储在本地主机中),而不必使用清单。
background.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中localhost中的文件。
但是想想应该有办法将文件编号减少到 2 而不是 3 对吗? 我尝试简单地更改我从后台脚本注入的文件,但它似乎不起作用......(我在要注入的文件中放置了一个 console.log,但我什么也没看到)。
需要将文件存储在服务器上的原因是,我可以更改扩展程序的代码,而不必在用户端推送更新。我只是在服务器中更改它,下次用户使用它时,它会注入最新版本。
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));
});
}
我对这一切都不熟悉
这是我的内容脚本:
content.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() 就是它所说的 -> 按钮拖动、移动等的逻辑
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。