Chrome Plugin 谷歌插件开发 inject注入植入的js无法调用jQuery问题
0
悬赏园豆：50
[已解决问题]
解决于 2021-07-22 09:24
manifest.json
{ "name": "LogFilter", "version": "1.0.0", "description": "Fast sort your Logs", "icons": { "16": "images/icon_16px.png", "32": "images/icon_32px.png", "48": "images/icon_48px.png", "128": "images/icon_128px.png" }, "browser_action": { "default_icon": "images/icon_16px.png", "default_title": "LogFilter" }, "web_accessible_resources": [ "images/icon_16px.png", "js/jquery.min.js", "js/inject.js" ], "content_scripts": [ { "matches": [ "http://192.168.1.102:5000/log/" ], "js": [ "js/jquery.min.js", "js/jslinq.js", "js/bootstrap.min.js", "js/bootstrap-table.min.js", "js/bootstrap-table-zh-CN.min.js", "js/myscript.js" ], "css": [ "css/bootstrap.min.css", "css/bootstrap-table.min.css" ], "run_at": "document_start" } ], "manifest_version": 2 }
所有代码只需要在http://192.168.1.102:5000/log/这个路径的页面执行，准备美化下这个页面，替换整个原有的head和body，并加一些简单的js交互。
myscript.js
document.addEventListener('DOMContentLoaded', function () {
injectCustomHTML();
injectCustomJS('js/jquery.min.js');
injectCustomJS();
});
function injectCustomHTML() {
$("html").attr("lang", "zh-CN");
$("head").html('<head><meta charset="utf-8"><link rel="shortcut icon" href="" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>LogList</title></head>');
$("[rel='shortcut icon']").attr("href", chrome.extension.getURL("images/icon_16px.png"));
}
function injectCustomJS(jsPath) {
jsPath = jsPath || 'js/inject.js';
var temp = document.createElement('script');
temp.setAttribute('type', 'text/javascript');
temp.src = chrome.extension.getURL(jsPath);
temp.onload = function () {
this.remove();//执行完移除
};
document.body.appendChild(temp);
}
此时已经注入了两个js（jquery.min.js、inject.js）到页面里：
可以看到jQuery也在inject.js之前加载了，但是inject.js里调用jQuery方法却提示找不到：Uncaught ReferenceError: $ is not defined
本来是把所有jQuery代码写在myscript.js里以content_scripts的方式注入页面的，但是content_scripts注入页面的js有一个很大的“缺陷”：无法访问页面中的JS，虽然它可以操作DOM，但是DOM却不能调用它。结果就是首次加载页面可以调用，但是再点击页面的dom想调用myscript.js里的function都提示找不到了。
我的需求就是替换页面的内容同时绑定一些js事件，用户点击修改后页面的某些节点也有对应的js交互，想请教下大家，这种情况怎么处理，js以什么方式才可以加载。
最佳答案
0
解决了，证实“content_scripts注入页面的js有一个很大的“缺陷”：无法访问页面中的JS，虽然它可以操作DOM，但是DOM却不能调用它”这句话应该有误，如果给dom指定oncick事件调用function，那会提示调不到，但是如果给dom绑定事件，用户点击dom就可以调用到方法了。例：
$("body").on("click", "#navbar ul li", function () {
navBarLiClick($(this).attr("data-value"));
});
navBarLiClick是页面里的一个function，如果直接写<li onclick="navBarLiClick()">，页面渲染完，点击li会提示找不到navBarLiClick方法，但是如果绑定click事件，那就可以调到了。
楼上说的配置background的方式也试过了，其实也不行。并且个人不太喜欢这个background，如果需求只是修改特定页面的内容，那么content_scripts非常合适，以这种方式主页页面的js只会在指定的页面运行。而background是全局的，你打开任何一个网页background注入的东西都会运行。
其他回答(1)
0
"background": {
"scripts": ["js/jquery.min.js"],
"persistent": false
},
加上这个看看
收获园豆：50
