javascript - 如何在浏览器扩展中动态附加内容脚本。?
问题描述
我正在尝试将脚本附加到 API 响应中的内容脚本上。
以下是 content.js
locationHref = window.location.href;
chrome.runtime.sendMessage({
action: locationHref,
value: false
}, function (data) {
localStorage();
console.log('contetn js ', data);
});
function localStorage() {
chrome.storage.local.get('script', (items) => {
var s = document.createElement("script");
s.type = "text/javascript";
s.innerHTML = items.script;
document.body.appendChild(s);
if (items.responseData) {
setTimeout((r) => {
loadPopUp(items.responseData); // this method is not triggering
}, 5000);
}
});
}
以下是 background.js 文件
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
fetchData(msg.action, sendResponse);
return true;
});
function fetchData(url, sendResponse) {
fetch("myscript.js", {
method: 'GET',
}).then(res => res.json())
.then(response => {
chrome.storage.local.set({
"script": response
}, function () {});
sendResponse(response);
}).catch(error => {
console.log(error)
});
}
myscript.js 有以下代码。
function loadPopUp(data) {
document.body.insertAdjacentHTML('beforeend', `<h4 style="color:white; font-size: 25px; text-align: center; margin-top: 15px;">
${data.name} has <span style="font-weight:bold">${data.count}</span> gene count</h4>`)
}
API 响应具有 loadPopUp() 方法,在创建脚本标记后,我尝试调用 loadPopup 方法,但它给出了undefined
错误。
我怎么解决这个问题。?
解决方案
我在将脚本直接加载到头部的嵌入式环境(即,我无法访问主页代码)中取得了成功。
这就是我所做的。
const exampleScript = {
name: "p5.js",
src: "https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js",
id: "p5-script"
};
const loadScript = (scriptToLoad, callback) => {
let script = document.createElement("script");
script.src = scriptToLoad.src;
script.id = scriptToLoad.id;
script.onload = () => {
callback();
}
script.onerror = (e) => console.error("error loading" + scriptToLoad.name + "script", e);
document.head.append(script);
}
loadScript(exampleScript, () => {
//...whatever you do after loading the script
});
您可能遇到的问题是将其加载到身体而不是头部。
这是一篇解释它的文章。https://aaronsmith.online/easy-load-an-external-script-using-javascript/
推荐阅读
- java - 从链表中删除对象的方法
- r - tidymodels bake:Error: Please pass a data set to `new_data`
- sql - SQL 索引可以区分“Doe, John”(1 个空格)和“Doe, John”(2 个空格)吗?
- sql - 如何删除两列中完全匹配的重复行?
- r - 如何按R中X上的列百分比过滤行
- javascript - 调用 ReactDOM.render() 函数而不是使用有状态组件
- node.js - mongoose.connect 不是一个函数 - React Native
- html - 如何使我的图片正确显示?
- string - 解码 Unicode 字符
- javascript - javascript 获取 S3 存储桶上资源的问题(由 Cloudfront 提供)