Chrome扩展编写之Hello World（二）

最新推荐文章于 2024-05-27 18:18:43 发布

ciml

最新推荐文章于 2024-05-27 18:18:43 发布

阅读量1.5w

点赞数

分类专栏： Web Dev 文章标签：扩展 chrome function 脚本 tabs permissions

本文链接：https://blog.youkuaiyun.com/ciml/article/details/5700719

版权

Web Dev 专栏收录该内容

2 篇文章

订阅专栏

本文详细讲解了一个Chrome扩展示例，展示了扩展页面与内容脚本之间的通信机制。通过manifest.json、popup.html、chat_tab.html和hello.js等文件的代码分析，阐述了如何使用chrome.tabs.sendRequest、chrome.extension.sendRequest和chrome.extension.onRequest.addListener等API进行数据传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在上一篇中，我简单讲解了Chrome扩展开发中的内容脚本部分，现在我将演示一个稍微有意思的例子，该例子主要演示扩展页面和内容脚本之间如何通信。虽然该例子稍有意思，但并没有什么实用价值，这里的目的仅仅是为了阐述基本原理。

这个例子如下：

扩展加载后，在浏览器扩展工具栏图标显示

当访问google（http://www.google.com.hk/）的时候，显示：

在扩展页中打开的标签页（选择扩展弹出页中的open chat tab按钮，上面第一图）如下：

该例子演示可以通过在文本框中输入文本，在这两个页面之间相互发送信息。上面的截图是我已经分别在扩展页和google页里输入了文本的情况。

实现代码

先把实现代码贴出来，后面再简单介绍下基本过程。

manifest.json清单文件内容：

{
   "browser_action": {
      "default_icon": "icon-19.png",
      "default_title": "hello chat",
      "icons": [ "icon-19.png" ],
      "name": "chat demo",
      "popup": "popup.html"
   },
   "content_scripts": [ {
      "js": [ "hello.js" ],
      "matches": [ "http://www.google.com.hk/" ],
      "run_at": "document_end"
   } ],
   "description": "chat demo",
   "icons": {
      "128": "icon-128.png"
   },
   "name": "chat demo",
   "permissions": [ "tabs"],
   "version": "1.0"
}

打开的标签页chat_tab.html文件内容：

<html> 
<body> 
<head> 
    <script> 
        function sendChatMsg() 
        { 
            var msgNode = document.getElementById("chat_msg"); 
            if(msgNode.value == "") 
            { 
                return; 
            } 
            chrome.windows.getCurrent(function(wnd){ 
            chrome.tabs.getAllInWindow(wnd.id, function(tabs){ 
                for(var i=0; i < tabs.length; i++) 
                { 
                    if(tabs[i].url == "http://www.google.com.hk/") 
                    { 
                        chrome.tabs.sendRequest(tabs[i].id, {msg: msgNode.value}); 
                        msgNode.value=""; 
                    } 
                } 
                }); 
          }); 
          contentNode = document.getElementById("chat_content"); 
          contentNode.value = contentNode.value + "我说:" + msgNode.value + "/r/n"; 
          contentNode.scrollTop = contentNode.scrollHeight; 
        } 
        chrome.extension.onRequest.addListener( 
        function(data){ 
            contentNode = document.getElementById("chat_content"); 
            contentNode.value = contentNode.value + "google说:" + data.msg + "/r/n"; 
            contentNode.scrollTop = contentNode.scrollHeight; 
            } 
        ); 
    </script> 
<head> 
<div>  
    <textarea id="chat_content"  ROWS="8" COLS="50"></textarea> 
    <div> 
     <input id="chat_msg" type="text" SIZE="46"/> 
     <input type="button" value="发送" οnclick="sendChatMsg()"/> 
    </div> 
</div> 
</body> 
</html>

点击扩展图标的popup.html文件内容：

<html> 
   <body> 
    <input type="button" value="open chat tab" onclick="chrome.tabs.create({'url': 'chat_tab.html'})"/> 
</body> 
</html>

内容脚本hello.js文件内容：

var sendChatMsg = function() 
{ 
    var msgNode = document.getElementById("chat_msg"); 
    if(msgNode.value == "") 
    { 
        return; 
    } 
    chrome.extension.sendRequest({msg: msgNode.value}); 
    contentNode = document.getElementById("chat_content"); 
    contentNode.value = contentNode.value + "i say:" + msgNode.value + "/r/n"; 
    contentNode.scrollTop = contentNode.scrollHeight; 
    msgNode.value=""; 
}; 
chatdiv = document.createElement("div"); 
chatdiv.id = "chat_div"; 
chatdiv.style.zIndex = "100"; 
chatdiv.style.position = "absolute"; 
chatdiv.style.left = "560px"; 
chatdiv.style.top = "280px"; 
chatdiv.style.width = "auto"; 
chatdiv.style.height = "auto"; 
chatdiv.style.border = "1px solid"; 
chatdiv.style.overflow = "auto"; 
chatdiv.style.backgroundColor = "#F7F4EC"; 
chatdiv.innerHTML = "<div>" + 
    "<textarea id=/"chat_content/" ROWS=/"8/" COLS=/"40/"></textarea>" + 
    "<div><input id='chat_msg' size=/"35/" type=/"text/"/><input id='sendBtn' type=/"button/" value=/"send/"/></div></div>"; 
document.body.appendChild(chatdiv); 
document.getElementById("sendBtn").addEventListener('click',sendChatMsg,false); 
chrome.extension.onRequest.addListener( 
    function(data){ 
            contentNode = document.getElementById("chat_content"); 
            contentNode.value = contentNode.value + "extension say:" + data.msg + "/r/n"; 
            contentNode.scrollTop = contentNode.scrollHeight; 
    } 
);

两个图标文件，分别是19象素的icon-19.png和128象素的icon-128.png

可以自己随便找两个图标，不要图标也可，只是在扩展工具栏图标显示的时候是一个空白不容易看清楚。注意图标文件名和清单文件中描述的要一致。

以上就是该扩展例子的全部代码内容，只需要将这些文件放在同一个目录中，然后在chrome浏览器中加载即可。

例子程序打包下载

内容讲解

对于熟练的web前端开发人员，这里需要额外阐述的内容不多。

在清单文件中：

browser_action节点是用来描述该扩展实用的页面范围，browser_action表示从浏览器层面实用所有页面，除此还可以是page_action，page_action表示实用于单个页面，如果是page_action的话，图标将显示在匹配页的地址栏，而不是工具栏。

popup.html：该文件就是当点击扩展图标的时候显示的内容，在该例子中，我们显示的内容就是打开一个新tab的按钮而已，如上第一图，open chat tab按钮。

permissions节点是描述权限的，一些扩展api需要事先在清单文件中描述权限，否则无法使用。我们用到了tab相关的api调用所以里面写了“tabs”。

在chat_tab.html页中：

主要是一点js实现，其中调用chrome.tabs.sendRequest扩展api来向内容脚本发送消息，用chrome.extension.onRequest.addListener添加从内容脚本接收到消息的处理函数。

在内容脚本hello.js中：

其处理逻辑包括新增加一个div元素来作交互界面，其实现无非是标准dom接口调用document.body.appendChild一个div元素而已。消息发送部分因为是从内容脚本发给扩展页，所以调用变为chrome.extension.sendRequest。而接收从扩展发来的消息处理同样是chrome.extension.onRequest.addListener。

注意在内容脚本中增加一个div界面时，对于send按钮的事件处理，如果直接写在html代码中是不起作用的，比如写成

<input id='sendBtn' type="button" value="send" onclick=”sendChatMsg”/>

这样的写发是不会触发对sendChatMsg的调用的，因为sendChatMsg并没有在原页面中定义。正确的做法是调用

document.getElementById("sendBtn").addEventListener('click',sendChatMsg,false);

来挂接事件处理函数。始终要记住：内容脚本和原始页面之间只共享DOM，它们之间的交互只能通过DOM接口来进行。

扩展API简介

对web前端开发人员，上面的例子需要说明的仅仅是对几个扩展api的介绍：

chrome.tabs.create()：调用该api将打开一个新的标签页。

chrome.windows.getCurrent(function callback)：该函数是获取当前窗口，其参数是一个回调函数，在回调函数中将传递一个windows对象，通过该对象可以获取窗口的基本信息，在我们的例子中主要是利用了窗口id。

chrome.tabs.getAllInWindow(integer windowId, function callback)：该接口是获取某个窗口的所有tab页，其第一个参数是窗口id，第二个参数是一个回调函数，在回调函数中将传回一个tabs数组对象，数组包含了当前窗口所打开的所有tab标签页对象。通过数组条目获取单个tab对象的基本信息，我们用到了tab的id和url属性。通过url判断，我们只将消息发送给了我们挂接了内容脚本的google首页。

chrome.tabs.sendRequest(integer tabId, any request, function responseCallback)：该函数从扩展页发送消息给内容脚本，第一个参数是内容脚本所在的tab id，第二参数是消息内容，为json格式。第三为可选响应回调函数参数。

chrome.extension.onRequest.addListener(function(any request, MessageSender sender, function sendResponse) {...}):

该接口用于挂接消息处理函数，在内容脚本和扩展页中都一样。收到的消息就是sendRequest发出的json格式消息。

chrome.extension.sendRequest(string extensionId, any request, function responseCallback)：从内容脚本发送消息给扩展页。第一个参数是扩展的id，为可选参数，默认表示发送给当前扩展。第二个参数为json格式消息对象，第三个参数是可选响应回调函数参数。