chrome扩展程序
构建Chrome扩展程序很容易&＃xff0c;而且从很多方面来说都是如此。 该文档确实做得很好&＃xff0c;并且包含大量示例。 另外&＃xff0c;检查已安装的任何组件以查看其背后的魔力很容易。 另一个很大的优点是&＃xff0c;它全都是Javascript&＃xff0c;CSS和HTML&＃xff0c;并带有Chrome API的额外奖励&＃xff0c;可让您额外获得一点点魔术。
最近&＃xff0c;我不得不为我的公司开发一个工具栏&＃xff0c;该工具栏必须阅读当前查看的页面&＃xff0c;显示一些SEO信息&＃xff0c;进行一些AJAX调用等。 并不是很困难&＃xff0c;但是我确实发现了一个没有得到充分记录的问题&＃xff08;如果有的话&＃xff09;。
在继续进行之前&＃xff0c;如果您对Chrome扩展程序的开发不完全了解&＃xff0c;建议您阅读本概述 。 您将了解有关架构多层之间的复杂性的更多信息。
问题
我决定通过在每个网页中注入iframe来加载扩展程序的UI元素&＃xff08;如工具栏和其他弹出窗口&＃xff09;。 考虑到这一点&＃xff0c;在多个iframe &＃xff0c;当前DOM&＃xff0c;Chrome后台Javascript文件和Chrome提供的其他层之间进行通信并不是一件容易的事。
实际上&＃xff0c;问题出在使用iframe上 。 我必须通过JSON对象从Background层向任何iframe发送大量数据&＃xff0c;反之亦然。 由于跨域限制&＃xff0c;无法通过页面中插入的内容脚本来操纵iframe 。
例如&＃xff0c;当前查看的页面URL是
http://www.example.com
并且注入的iframe URL是
chrome-extensions&＃xff1a;// uniqueidmadeoutoflotsandlotsofletters
两者之间的通信是不可能的&＃xff0c;因为跨域通信是一个很大的问题。
那么为什么要使用iframe&＃xff1f;
好吧&＃xff0c; iframe是&＃xff08;当前&＃xff09;隔离大量Javascript&＃xff0c;CSS和HTML的唯一方法&＃xff0c;而不受当前网页样式和行为的影响。
另外&＃xff0c;我很固执&＃xff0c;以为可能存在一种以优雅的方式在所有层之间进行通信的方法。 即使我在Google或StackOverflow上找不到答案。
有什么解决办法&＃xff1f;
使用Chrome API方法chrome.tabs.sendMessage从“背景”层发送消息时&＃xff0c;该消息将发送到所有帧&＃xff0c;而不仅仅是发送了ContentScript的消息。
我不知道为什么我没有想到这一点&＃xff01;
由于它的ContentScript内喷射的内部框架 &＃xff0c;而且也能获得到Chrome API。
因此&＃xff0c; iframe可以使用默认的DOM方法window.parent.postMessage与其父ContentScript进行对话&＃xff0c;并通过chrome.extension.sendRequest与Background层进行对话&＃xff0c;并且还可以使用chrome.extension.onMessage来监听Background层消息。 addListener方法。
如何实现&＃xff1f;
这个想法很简单&＃xff1a;我创建了一组接待员 &＃xff0c;负责处理从一层到另一层的所有消息传输。
当前&＃xff0c;这是我设置各层角色的方式&＃xff1a;
背景&＃xff08;请参阅background.js&＃xff09;
可以从ContentScript接收消息&＃xff0c;然后将它们重定向到适当的iframe或处理消息。
可以将消息发送到所有框架&＃xff08;ContentScript和iframe &＃xff09;。
ContentScript&＃xff08;请参阅inject.js&＃xff09;
可以同时从Background层和iframe接收消息。
当来自iframe时 &＃xff08;通过默认的window.postMessage方法&＃xff09;&＃xff0c;它将消息重定向到Background&＃xff08;如果指定&＃xff09;。 如果未指定&＃xff0c;它将处理该消息。
只能将消息发送到后台。
iframe&＃xff08;请参阅iframe.js&＃xff09;
可以从唯一的Background层接收消息&＃xff0c;然后检查它是否适合他&＃xff0c;然后处理该消息。
可以使用window.parent.postMessage将消息发送到ContentScript。
换句话说&＃xff1a;
–背景与ContentScript和iframe对话&＃xff0c;但仅收听ContentScript。
– ContentScript侦听Background和iframe &＃xff0c;但仅侦听Background。
– iframe与ContentScript对话并收听背景。
旁注&＃xff1a;我知道Background也可以侦听iframe消息&＃xff0c;但是在我的示例中&＃xff0c;由于没有必要&＃xff0c;因此我跳过了这个概念。
区分iframe
每个iframe都有一个唯一的ID&＃xff08;在下面的示例中称为View &＃xff09;&＃xff0c;因此很容易将消息重定向到特定的iframe 。 一种简单的方法是在加载iframe时在URL中添加一个属性&＃xff0c;如下所示&＃xff1a;
chrome.extension.getURL(&＃39;html/iframe/comment.html?view&＃61;comment’);
讯息设定
传递的消息是包含两个属性的简单对象&＃xff1a;
- 信息
–数据
每层&＃xff08;背景&＃xff0c;ContentScript和IFrame&＃xff09;都有一个tell方法&＃xff0c;该方法发送带有两个属性的消息。
tell(‘tell-something’, {attribute1:’a’, attribute2:’b’});
当iframe发送消息时&＃xff0c;当前iframe 视图ID也会作为data中的源属性发送 。
tell(‘tell-parent-something’, {source:’comment’});
当需要将消息发送到特定的iframe时 &＃xff0c;将在数据中添加带有正确视图ID的view属性。
tell(‘tell-to-an-iframe’, {
view:’comment’,
title:’hello world!’
});
如果需要将邮件发送到所有iframe &＃xff0c;则可以使用“ *”通配符。
tell(‘tell-to-all-iframes’, {view:’*’, title:’foo bar’});
如果未指定视图&＃xff0c;则应由ContentScript / Background处理消息。
现在&＃xff0c;这个例子&＃xff08;最后&＃xff09;&＃xff01;
我为喜欢我称为iHeart的页面创建了一个简单的扩展名&＃xff08;您可以在github上找到源代码&＃xff09;。
这是一个简单的按钮&＃xff0c;在屏幕左侧有一个心形。 单击后&＃xff0c;用户可以添加评论并保存。 保存的页面将在扩展弹出按钮中列出&＃xff1a;
坚韧的细节
每层都有自己的告诉和监听方法&＃xff1a;
背景
讲
_this.tell &＃61; function (message, data){
var data &＃61; data || {};
chrome.tabs.getSelected(null, function (tab){
if (!tab) return;
chrome.tabs.sendMessage(tab.id, {
message : message,
data : data
});
});
};
倾听
function onPostMessage (request, sender, sendResponse){
if (!request.message) return;
if (request.data.view){
_this.tell(request.message, request.data);
return;
}
processMessage(request);
};
内容脚本
讲
function tell (message, data){
var data &＃61; data || {};
// send a message to "background.js"
chrome.extension.sendRequest({
message : message,
data : data
});
};
倾听
// messages coming from iframes and the current webpage
function dom_onMessage (event){
if (!event.data.message) return;
// tell another iframe a message
if (event.data.view){
tell(event.data);
}else{
processMessage(event.data);
}
};
// messages coming from "background.js"
function background_onMessage (request, sender, sendResponse){
if (request.data.view) return;
processMessage(request);
};
iframe
讲
_this.tell &＃61; function (message, data){
var data &＃61; data || {};
data.source &＃61; _view;
window.parent.postMessage({
message : message,
data : data
}, &＃39;*&＃39;);
};
倾听
function background_onMessage (request, sender, sendResponse){
// make sure the message was for this view (you can use the "*" wildcard to target all views)
if (
!request.message ||
!request.data.view ||
(request.data.view !&＃61; _view && request.data.view !&＃61; &＃39;*&＃39;)
) return;
// call the listener callback
if (_listener) _listener(request);
};
通信过程非常简单。 当您访问网页并看到所看到的内容时&＃xff08;它可以是任何东西&＃xff0c;这是您想要的&＃xff0c;我不会判断&＃xff09;&＃xff0c;然后单击iHeart按钮。 然后&＃xff0c;该按钮指示打开评论iframe。
js / iframe / heart.js
function heart_onClick (event){
$(&＃39;.heart&＃39;).addClass(&＃39;active&＃39;);
_iframe.tell(&＃39;heart-clicked&＃39;);
};
然后&＃xff0c;它在ContentScript中处理消息并打开注释弹出窗口。
js / inspect.js
function processMessage (request){
if (!request.message) return;
switch (request.message){
case &＃39;iframe-loaded&＃39;:
message_onIframeLoaded(request.data);
break;
case &＃39;heart-clicked&＃39;:
message_onHeartClicked(request.data);
break;
case &＃39;save-iheart&＃39;:
message_onSaved(request.data);
break;
}
};
...
function message_onHeartClicked (data){
var comment &＃61; getView(&＃39;comment&＃39;);
comment.iframe.show();
tell(&＃39;open-comment&＃39;, {
view:&＃39;comment&＃39;,
url:window.location.href,
title:document.title
});
};
出现注释弹出窗口&＃xff0c;并在注释框下方显示当前网页标题。
js / iframe / comment.js
function onMessage (request){
switch (request.message){
case &＃39;open-comment&＃39;:
message_onOpenComment(request.data);
break;
case &＃39;website-is-hearted&＃39;:
message_onIsHearted(request.data);
break;
}
};
...
function message_onOpenComment (data){
$(&＃39;.page-title&＃39;).html(data.title);
};
按下保存按钮后&＃xff0c;注释iframe会将信息发送回ContentScript。
js / iframe / comment.js
function save_onClick (event){
var comment &＃61; $(&＃39;#comment&＃39;).val() || &＃39;&＃39;;
_iframe.tell(&＃39;save-iheart&＃39;, {
comment : comment
});
};
ContentScript隐藏注释iframe&＃xff0c;并告诉Background保存整个内容。
js / inject.js
function message_onSaved (data){
var comment &＃61; getView(&＃39;comment&＃39;);
comment.iframe.hide();
tell(&＃39;save-iheart&＃39;, {
url:window.location.href,
title:document.title,
comment:data.comment
});
};
最后&＃xff0c;Background通过将网站保存为数组来最终确定所有细节。
js / background.js
function onPostMessage (request, sender, sendResponse){
if (!request.message) return;
if (request.data.view){
_this.tell(request.message, request.data);
return;
}
switch (request.message){
case &＃39;save-iheart&＃39;:
message_onSaved(request.data);
break;
case &＃39;all-iframes-loaded&＃39;:
message_allIframesLoaded(request.data);
break;
}
};
…
function message_onSaved (data){
_websites.push({
url : data.url,
title : data.title,
comment : data.comment
});
};
……接待员做了他们的工作
就是这样。 那是我解决多种类型的层之间的通信问题的解决方案&＃xff0c;这并不难……
现在&＃xff0c;如果我可以轻松解决个人关系中的沟通问题&＃xff0c;那就太好了&＃xff0c;谢谢&＃xff1a;P
通过处理数据验证&＃xff0c;将喜欢的网页保存在数据库中&＃xff0c;动态调整iframe内容的大小&＃xff0c;为扩展添加一些动画以使其使用更加有趣&＃xff0c;可以进一步处理该示例。 所有这些都很棒&＃xff0c;并且已经可以实现&＃xff0c;但这超出了本文的范围。
翻译自: https://www.sitepoint.com/chrome-extensions-bridging-the-gap-between-layers/
chrome扩展程序
京公网安备 11010802041100号