扩展插件添加html标签,Chrome扩展程序：插入javascript标记并调用函数

我有一个chrome扩展,它使用内容脚本来动态插入引用an external javascript file的脚本标记.我使用的代码是：

var html_doc = document.getElementsByTagName('head')[0];

var _js = document.createElement('script');

_js.setAttribute('type', 'text/javascript');

_js.setAttribute('id', 'chr_js');

_js.setAttribute('src', 'http://unixpapa.com/js/dyna1.js');

if(!document.getElementById('chr_js'))

html_doc.appendChild(_js);

外部Javascript包含以下代码：

function lfunc(){

alert('RUNNING loaded function');

}

alert('LAST LINE of script');

当我在选项卡中加载页面时,会出现“最后一行脚本”消息,显示脚本标记已正确插入DOM中.

我的扩展程序还有一个按钮(即browser_action).现在,我希望这个按钮在单击时调用上面定义的lfunc().不幸的是,我的代码根本不起作用.

我在background.html页面中使用以下代码来处理我的按钮的onClick事件：

chrome.browserAction.onClicked.addListener(function(tab) {

chrome.tabs.executeScript(null,

{code: "try {lfunc()} catch (e) {alert(e);}"});

}); // it should call lfunc()

manifest.json文件中的权限是：

"permissions": [

"tabs", "http://*/*", "https://*/*" ]

我没有收到“RUNNING loaded function”消息,而是收到错误消息“ReferenceError：lfunc not defined”.

我究竟做错了什么？

解决方法:

您可以执行外部JS文件(通过将其注入DOM(扩展中的文档)).外部JS文件也可以访问本地DOM.

这两者之间的沟通是不可能的：

>扩展程序无法访问用户添加的Javascript(非原生)：

扩展的JS无法访问页面的jQuery对象,但它可以访问其document.body.

>用户添加的Javascript(页面的JS或您添加的外部JS)无权访问扩展：

在该页面中,您无法访问chrome API,例如书签,标签,浏览器操作等.

出于安全原因,这是非常有意义的.

我所说的(sendRequest和onRequest)是“内容脚本”和扩展脚本/背景页面之间的通信.在你的情况下无关紧要=)抱歉.

答案

> I cannot call specific functions within the external JS file from the extension because of the lack of communication capabilities between the two

那就对了.

> All I can do is make my extension inject the external JS file into the DOM. This will execute whatever is there to be executed in the external JS file

那就对了. ext JS可以包含立即动作和定时器等,就像正常加载的JS(在网页本身中)一样.

> The code launching granularity from the extension is at external JS level, not at JS function level

JS功能级别是什么意思？扩展JS？

PS

chrome.tabs.executeScript并不像你想象的那么酷.基本上它的作用是在页面的上下文中执行脚本(如content_scripts).但是,它与content_scripts具有相同的限制：它可以访问DOM和本机JS功能,而不是用户添加JS.一个例子：

// Inside a `background_page`:

chrome.tabs.executeScript(null, {

"code": "document.body.removeChild(document.body.firstChild);"

});

这是有效的,因为只需要访问页面(总是存在的)DOM.以下将不起作用(假设jQuery包含在网页本身)：

// Still inside a `background_page`:

chrome.tabs.executeScript(null, {

"code": "jQuery('input').remove();"

});

这是行不通的,因为jQuery是一个外部的,非本地的,用户添加的JS对象,扩展名无法访问(background_page和content_scripts).

我真的不明白这个最后限制的原因,但它完全是关于Chrome中的沙盒和安全性=)我认为这是一件好事……

BTW

我认为你的问题的解决方案非常简单……你可以让browser_action将外部JS注入到页面的DOM中.那就够了吧？外部JS包含逻辑AND实际函数调用.更好的解决方案,因为外部JS仅在按下/触发browser_action(按钮)时加载.一个非常小的缺点：非常短的延迟(=在推动browser_action后下载外部JS).

我可能会再次建议：将所有扩展JS放入扩展中.这将允许脱机功能,并且永远不需要(另一方)连接到第三方服务器.

标签：javascript,function,google-chrome,background

来源： https://codeday.me/bug/20190716/1482934.html