google控件-入门-1.1

这个东西要是自己研究起来，真的是。。。神了个奇了，根本搞不懂哪跟哪啊。

真的要感谢 http://www.itzhai.com/chrome-plugin-development-example-switch-lights-browser-action.html 。要不然我还是懵懵的了。

还要感谢郑朋桥给的讲解思路。不然我就给大家讲不清楚了。

一、配置文件 manifest.json

要想给google加一个控件，那么需要一个类似配置文件的json文件，让浏览器知道从哪开始，需要解析什么的等一些其他内容。这次我们讲的目标是，添加一个控件，然后先输出一个hello world!那我们来看看我们第一步需要配置的东西。

{
  "manifest_version": 2,
  "name": "my first chrome extension", //控件名称
  "version": "1.0",
  "background": {
      "page": "background.html"
  },
  "page_action": {   //展示的图标信息
    "default_icon": "1.png",
    "default_title": "这是我的第一个chrome插件",
    "default_popup": ""
  },
  "permissions": ["tabs", "http://localhost:63342/*"] //使用的页面限制，必须要有
}

二、后台

后台就是长期运行的页面，我们可以给他绑定一些，当我们前面tab操作时需要一并触发的事件。

浏览器是如何知道后台服务是那个页面在干的事？当然就是刚才配置文件里面的这三行啦。

"background": {
   "page": "background.html"
},

background.html 这个页面就干一件事，引用background.js文件。而且他只能通过外部引用。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <script src="background.js"></script>
</head>
<body></body>
</html>

那background.js文件里面干什么呢？可能就是根据标签页的一些变动产生的一些联动操作啊。而我们现在需要干的就是，根据标签页的刷新，并在页面刷新完成时展示我们的控件小图标，然后在控制台输出hello world!

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    ///changeInfo.status 就是页面刷新的状态，complete表示完成
    if(changeInfo.status == "complete"){
        chrome.pageAction.show(tabId);
        chrome.tabs.executeScript(null, { code: "console.log('hello world!'); ", allFrames: true });
    }
});

    综合前两步我们就可以完成我们的小控件的初始样子了。大家期待波？！

【下面一大波截图正在赶来！！】

打开扩展程序

扩展程序

选择我们的文件夹

选择文件

然后在扩展程序这和右上角都存在咯

扩展程序出现导航右侧

三、右上角的页面

可是吧，我们的需求一般不是这么简单的，我们需要有一些确认吧，就是我们想让用户点一下我们的图标，然后弹出一个小界面，然后进行一些操作。那我们就需要加这个popup.html。那这个我们需要修改什么呢？

{
  "manifest_version": 2,
  "name": "my first chrome extension",
  "version": "1.0",
  "background": {
      "page": "background.html"
  },
  "page_action": {
    "default_icon": "1.png",
    "default_title": "这是我的第一个chrome插件",
    "default_popup": "popup.html"  //这里有修改哦
  },
  "content_scripts": [{            //这里有修改哦
    "matches": ["http://localhost:63342/*"],//这里有修改哦
    "js": ["jquery-2.0.2.min.js"]           //这里有修改哦
  }],                                       //这里有修改哦
  "permissions": ["tabs", "http://localhost:63342/*"]
}

首先，我们肯定还是需要修改我们的配置文件，将default_popup设定一个页面，这样浏览器就知道当我们要弹出框的时候，我们会加载这个popup.html页面了。

至于popup.html这个就是正常的Html界面了，不过提醒哦，不管是这个页面还是之前的页面都尽量不要在html页面中写js代码，好像会有问题。这个界面没啥特殊的，我就截个按钮的代码吧。

<!DOCTYPE html>
<html>
    <head>
        <title>按钮</title>
        <style>div{ background: #F3F3F3; text-align: center; width: 150px; } </style>
    </head>
    <body>
        <div id="createData">生成数据</div>

        <script src="jquery-2.0.2.min.js"></script>
        <script src="popup.js"></script>
    </body>
</html>

popup.html界面没啥特别的，但是 popup.js 就有点特殊的了。之前如果是正常的页面，我们如果要给div点击事件，有两种方法，一种直接在html中定义onclick=''，另一种是在js里面定义，我们可以直接写。

但在这里如果要在js里面定义，必须要在外面套一层，不然不好使。

document.addEventListener('DOMContentLoaded', function(){
    $("#createData").click(function(e) {
        chrome.tabs.executeScript(null, { code: "console.log('我是popup页面的'); ", allFrames: true });
    })
});

点击div后要输入我是popup页面的。

程序写好了，我们要怎么出效果呢？点击生成数据之后，就会在控制台看到这个了

然后就ok啦。好了，我要继续研究我的代码咯，下次见咯。

【最后插一句，当我们修改本地代码的时候，我们自定义的控件居然也会一起动，好厉害呀】

google控件-入门-1.1

猜你喜欢