首页新闻找找看学习计划

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

0
悬赏园豆:50 [待解决问题]

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

oppoic的主页 oppoic | 小虾三级 | 园豆:560
提问于:2018-10-24 11:09
< >
分享
所有回答(2)
0

"background": {
"scripts": ["js/jquery.min.js"],
"persistent": false
},

加上这个看看

放逐人 | 园豆:634 (小虾三级) | 2018-10-25 18:17
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注入的东西都会运行。
oppoic | 园豆:560 (小虾三级) | 2018-10-26 17:45
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册