Chrome扩展程序:插入javascript标记并调用函数

Question

我有一个chrome扩展,它使用内容脚本来动态插入引用外部javascript文件的脚本标记.我使用的代码是:

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事件:

<script>
chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(null, 
    {code: "try {lfunc()} catch (e) {alert(e);}"});
  }); // it should call lfunc()
</script>

manifest.json文件中的权限是:

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

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

我究竟做错了什么？

Answer 1

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

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

• 扩展程序无法访问用户添加的Javascript(非原生):
  扩展程序的JS无法访问页面的jQuery对象,但它可以访问它document.body.
• 用户添加的Javascript(页面的JS或您添加的外部JS)无法访问扩展程序:
  从页面中,您无法访问chrome API,如书签,标签,浏览器操作等.

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

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

答案

>由于两者之间缺乏通信功能,我无法从扩展中调用外部JS文件中的特定功能

那就对了.

>我所能做的就是让我的扩展将外部JS文件注入DOM.这将执行外部JS文件中要执行的任何操作

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

>扩展中的代码启动粒度是在外部JS级别,而不是在JS功能级别

你什么意思JS function level？扩展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按下/触发(按钮)时加载.一个非常小的缺点:非常短暂的延迟(=推动后下载外部JS browser_action).

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