Chrome插件-文件结构和交互过程

最新推荐文章于 2022-05-25 11:22:59 发布

weixin_34414196

最新推荐文章于 2022-05-25 11:22:59 发布

阅读量424

点赞数

文章标签：数据库 json 前端 ViewUI

原文链接：https://segmentfault.com/a/1190000013451659

版权

前言

谷歌插件的详细开发文档有很多，360翻译了谷歌插件的官方文档，具体的需求和开发过程都可以参考该链接。在一次工具的开发中，我需要用到一个有谷歌插件按钮打开的html页面、谷歌插件后台和打开某个网站才能运行插件的content_scripts字段。这篇文章先通过谷歌插件的描述文件manifest.json展开讲一下各个字段和文件的功能。然后通过一个小例子简单说下描述文件manifest.json中几个js文件的具体作用和交互过程。

描述文件介绍

1.下面是一个描述文件menifest.json文件和本地文件，由于json格式的文件不能添加注释，所有就只能一块块说明：

{
  "name":"Google",
  "version":"0.2.0",
  "manifest_version":2,
  "description":"Google",
  "background":{"scripts":["jquery-2.0.0.min.js","background.js"]},
  "icons": {
        "16": "image/16.png",
        "48": "image/48.png",
        "128": "image/128.png" 
    },
  "browser_action":{
    "default_title":"Google",
    "default_popup":"index.html",
    "default_icon":"image/48.png"
  },
  "permissions" : ["tabs","http://*/*","https://*/*"],
  "content_scripts":[{
    "matches":["https://segmentfault.com/*"],
    "js":["jquery-2.0.0.min.js","main.js"]
  }],
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

本地文件

2.描述文件menifest.json字段简单说明。
"name"字段用于插件的命名。
"version"字段用于定义插件的版本。
"manifest_version"字段用于定义插件描述文件menifest.json的版本。
"description"字段用于描述插件的作用。
"background"字段用于定义谷歌插件的后台脚本，这个脚本相当于一个连接当前谷歌网页和插件的枢纽。文章后述会详细的说明。
"icons"字段用来定义在插件载入页面的图标和发布后的图标，如图1。

图1 在插件载入页面的图标和发布后的图标

"browser_action"字段主要让插件在浏览器上可以点击，并且弹出index.html渲染出的页面，它的图标表现由default_icon控制，如下图2所示。

"browser_action":{
    "default_title":"Google",
    "default_popup":"index.html",
    "default_icon":"image/48.png"
  },

我们在index.html写上一段代码，然后打开插件就可以看到如图3所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Hello,World!</h1>
    </body>
</html>

图2 浏览器上的图标

图3 打开插件

"permissions"字段用来添加可以被谷歌插件跨域请求的网站，具体作用可以转到Chrome插件-跨域请求。如果需要跨全域可以这样写：

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

"content_scripts"字段可以用来控制插件运行的条件，当你打开matches里面的网址时会执行js里面的脚本一次。具体作用也可以转到Chrome插件-跨域请求。

  "content_scripts":[{
    "matches":["https://segmentfault.com/*"],
    "js":["jquery-2.0.0.min.js","main.js"]
  }],

文件交互的demo

本地文件和描述文件中一共出现了4个js文件，分别是background字段中的jquery-2.0.0.min.js、background.js；content_scripts字段中jquery-2.0.0.min.js、main.js；本地文件下的popup.js。概括而说，jquery-2.0.0.min.js是必备的jquery库，background.js是谷歌插件和网站页面的交互枢纽，main.js是当条件成立时执行的脚本，popup.js用来控制index.html中的行为。
要说明的是，main.js只能对当前谷歌浏览器的页面操作，popup.js只能对谷歌插件的前端操作，background.js无法对前面任何两者操作，但是它可以用来作为枢纽将两个html联系起来，通过信息交互搬运内容。
下面的给出一个例子：抓取简书页面的文章标题，并把标题放到谷歌插件的前端显示出来。

1.定义menifest.json文件如下：

{
  "name":"Google",
  "version":"0.2.0",
  "manifest_version":2,
  "description":"Google",
  "background":{"scripts":["jquery-2.0.0.min.js","background.js"]},
  "icons": {
        "16": "image/16.png",
        "48": "image/48.png",
        "128": "image/128.png"
    },
  "browser_action":{
    "default_title":"Google",
    "default_popup":"index.html",
    "default_icon":"image/48.png"
  },
  "content_scripts":[{
    "matches":["https://segmentfault.com/*"],
    "js":["jquery-2.0.0.min.js","main.js"]
  }],
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

2.在main.js添加代码如下，因为脚本中需要用到jquery固需要在描述文件中申明导入jquery-2.0.0.min.js。

//打开思否后，执行main.js这个脚本
function sendmessage(){
    var htmlOfTitle = $('.profile-mine__content--title')[0].innerHTML;   //获得如图4的思否标题，利用右键检查得到图5中其元素位置
    console.log(htmlOfTitle);                                            //输出到浏览器console，图6
    var msg = {content:htmlOfTitle,};                                    //封装成json格式的信息
    chrome.runtime.sendMessage(msg,function(response) {                  //将抓取到的标题发送给background.js后台处理
        console.log('content get response:',response);
    });
}
sendmessage()

图4 文章内容

图5 元素位置

图6 console输出

3.在background.js添加代码如下：

var htmlOfTitle = {};
//监听来自main.js的json信息
chrome.extension.onMessage.addListener(function(request,sender,callback){
    htmlOfTitle = request.content;
    callback(htmlOfTitle);     //把内容回执给main.js用来调试，如图7
});

图7 回执被浏览器console输出

4.在index.html编写html代码，jquery-2.0.0.min.js用来调用jquery，popup.js中放用来对该html中button进行控制的脚本，打开谷歌插件后效果如图8所示。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="main.css" />
    </head>
    <body>
        <div class="wrap">
            <button id = "show_title">显示文章题目</button>
            <h1 class="title"></h1>
            <!-->该链接可以将谷歌插件通过浏览器打开，用F12单独调试<-->
            <a href="###" target="_blank" style="font-size:14px;">新窗口打开</a> 
        </div>
        <script type="text/javascript" src="jquery-2.0.0.min.js"></script>
        <script type="text/javascript" src="popup.js"></script>
    </body>
</html>

图8 谷歌插件的页面

5.在popup.js添加代码如下，当点击按钮时，插件将把从background.js中取得的title数据显示在插件上，最终的结果如图9所示：

//popup.js绑定事件，作用于index.html
function bindEvent(){
    var htmlOfTitle = chrome.extension.getBackgroundPage().htmlOfTitle;  //谷歌插件可以直接通过该函数从background.js中获得变量的值
    $("#show_title").click(function(){     
        $(".title").html(htmlOfTitle);
    })
}
bindEvent();

图9 最终将浏览器页面上的数据搬到谷歌插件上

至此，一个简单的交互demo完成，后面文章会简单说下谷歌插件中的信号传递机制。

weixin_34414196

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Chrome插件-文件结构和交互过程

前言谷歌插件的详细开发文档有很多，360翻译了谷歌插件的官方文档，具体的需求和开发过程都可以参考该链接。在一次工具的开发中，我需要用到一个有谷歌插件按钮打开的html页面、谷歌插件后台和打开某个网站才能运行插件的content_scripts字段。这篇文章先通过谷歌插件的描述文件manifest.json展开讲一下各个字段和文件的功...
复制链接

扫一扫

Chrome插件-文件结构和交互过程

前言

描述文件介绍

文件交互的demo

“相关推荐”对你有帮助么？