javascript - Chrome 扩展 : inserting a javascript tag and calling a function

Question

我有一个 chrome 扩展，它使用 content script 来动态插入引用 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 事件:

<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 is not defined”。

我做错了什么？

Answer 1

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

这两者之间不可能进行通信:

• 扩展程序无法访问用户添加的 Javascript(非 native ):
  扩展程序的 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？

附言
chrome.tabs.executeScript 并不像您想象的那么酷。基本上它所做的是在页面上下文中执行脚本(如 content_scripts)。但是，它具有与 content_scripts 相同的限制:它可以达到 DOM 和 native 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 中的沙盒和安全性 =) 我想这是一件好事......

顺便说一下
我认为您的问题的解决方案非常简单...您可以使 browser_action 将外部 JS 注入(inject)页面的 DOM。够了吧？外部 JS 包含逻辑和实际函数调用。更好的解决方案，因为外部 JS 仅在 browser_action (按钮)被按下/触发时加载。一个非常小的缺点:延迟非常短(= 在推送 browser_action 之后下载外部 JS)。

我可以再次建议:将所有扩展 JS 放入扩展中。这将允许离线功能，并且永远不需要(另一个)连接到第三方服务器。