炫意html5
最早CSS3和HTML5移动技术网站之一

Chrome Plugin 谷歌插件开发 inject注入植入的js无法调用jQuery问题

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以什么方式才可以加载。

回答

解决了,证实“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注入的东西都会运行。

炫意HTML5 » Chrome Plugin 谷歌插件开发 inject注入植入的js无法调用jQuery问题

Java基础教程Android基础教程