zoukankan      html  css  js  c++  java
  • 动手做第一个Chrome插件

      Chrome插件是令人惊讶的简单,一旦你弄懂它的工作和实现原理。它是由一部分HTML,一部分Js,然后混合了一个叫做manifest.json的Json文件组合而成的整体。这意味着你可以使用你最擅长的js框架去实现它。

      如果你还是一个Chrome插件的新手并且想尝试写一个的话,下面的文章将会带领大家并且尝试让大家理解Chrome插件的工作机制。这篇文章将会讲述每一块架构,以及相互之间的联系和插件的一般化形式。

    架构

      Chrome插件中的文件大体上可以分成2部分:Chrome插件中确确实实存在的文件,并且是应用程序级别的,如上图的Chrome Extension Scripts以及注入到每个网页Dom当中的文件(如Content Scripts 或者Injected Scripts).这些文件都被放在manifest.json当中,Chrome内部会自动识别不同个文件的作用。

      在任何时候,popup和background都只有一份,相比较起来,如果你有多个Tab(这里的Tab指的是Chrome当中的选项卡,也就是一个窗口页面),那么Content Scripts和 Injected Scripts会运行在每一个Tab当中,也就是可以跨选项卡。当然,你可以指定往哪个Tab当中去注入Scripts,也就是说,注入操作是可选择的。

      下面是一些它们如何工作的细节:

    Manifest.json

    • 这个Json文件是把backgrounds, popups, content scripts 和injected scripts 放在一起,并以结构化的方式书写。
    • 设置扩展,如Permission。
    • 设置扩展的基本信息。

    Background

    • Javascript文件总是运行在后台(在老版本的Chrome当中,background是html文件并且嵌入了javascript).
    • 没有显示界面。
    • 有Chrome应用程序级别命令的访问权限。
    • 有使用所有Chrome API的权限

    Popup

    • 点击插件图标会显示出Html和Javascirpt.
    • 也拥有应用程序级别的权限(和background一样)
    • 只有当Chrome插件的图标点击的时候才触发。
    • 对所有的pop-up Chrome API有使用权限。

    Content Scripts

    • 拥有一部分Api的使用权限(比如从backgorund监听消息)
    • 对于页面Dom有完整的访问权限,但是对于任何window级别的对象没有访问权限(比如全局变量),对于frame也没有访问权限;这是因为安全限制。
    • Content scripts运行在介于插件和页面之间,全局的window对象是和页面/插件全局命名空间完全不同的。

    Injected Scripts

    • 和Contente Scripts 一样,只拥有部分Api的使用权限
    • 注入当前Tab的网页当中,并不与插件进行通信。

    关联关系

      他们之间的联系只要你弄懂了整体的架构,我相信就会很明了。

      在应用程序级别的部分是可以有互相访问的权限的。比如Popup文件能用chrome.extension.getBackgroundPage()访问background里面的东西,这就好像Backbone 视图可以访问他们的Model和Collection。

      Content Scripts是存在于每个独立的Dom页面,和background和popup用message的方式进行通信交流。特别的,它可以使用chrome.tabs.sendMessage和chrome.runtime.onMessage.addListener去向对方发送消息。这和Backbone 的事件系统很像.

      Injected Scripts和Content Scripts的不同在于它不能监听或者发送消息给其他的Chrome插件部分。

    结构

      组织你的Chrome插件,能更好的让你分清楚不同的文件的不同作用。不同的项目的组织结构都可以是相似的,下面列举了一种组织形式,大家可以参考一下。

      Manifest.json把所有的需要的文件都放在一起了,需要注意的一点是文件是按顺序被编译的,所以被依赖的文件往往是放在实际的script文件之前的,下面的代码中,jquery.js实在content scripts中的recorder.js和player.js之前的。  

    {
      "manifest_version": 2,
    
      # 插件基本信息
      "name": "MyExtension",
      "description": "MyExtension",
      "version": "1.0.0",
    
      # popup弹出窗文件位置
      "browser_action": {
        "default_icon": "img/icon.png",
        "default_popup": "popups/popup.html"
      },
    
      # 设置 content scripts 以及什么时候注入什么类型的页面
      "content_scripts": [{
        "matches": ["http://*/*","https://*/*"],
        "css":["styles/styles.css"],
        "js": [
          "bower_components/jquery/dist/jquery.min.js",
          "content-scripts/recorder.js",
          "content-scripts/player.js",
        ]
      }],
    
      # 设置background的scripts
      "background": {
        "scripts": [
          "bower_components/jquery/dist/jquery.min.js",
          "bg/background.js"
        ]
      },
    
      # 脚本的权限
      "permissions": [
        "<all_urls>",
        "tabs",
        "storage",
        "unlimitedStorage"
      ]
    }

     动手做一个Chrome插件

      说了再多,不做也是没用的。我们先新建一个Manifest.json文件,复制如下代码:

    {
      "manifest_version": 2,
    
      "name": "GTmetrix Analyzer Plugin",
      "description": "This extension will analyze a page using GTmetrix",
      "version": "1.0",
    
      "browser_action": {
       "default_icon": "icon.png",
       "default_popup": "popup.html"
      },
      "permissions": [
       "activeTab"
       ]
    }

      其中有几点需要注意,browser_action 这个指定了点击插件的时候,弹出的页面以及 插件的图标。Permission 就是指定了哪些URL对于这个插件是有用的,比如你可以输入特定的域名,那么只有在这个域名下,这个插件才有用。

      下面我们来新建一个popup.html页面,代码如下。

    <!doctype html>
    <html>
      <head>
        <title>GTmetrix Analyzer</title>
        <script src="popup.js"></script>
      </head>
      <body>
        <h1>GTmetrix Analyzer</h1>
        <button id="checkPage">Check this page now!</button>
      </body>
    </html>

      大家可能注意到了我其实使用了一个popus.js的文件,这个其实是为了实现点击checkPage时候的效果所必须的脚本,下面我们新建一个popup.js的文件。

    ocument.addEventListener('DOMContentLoaded', function() {
      var checkPageButton = document.getElementById('checkPage');
      checkPageButton.addEventListener('click', function() {
    
        chrome.tabs.getSelected(null, function(tab) {
          d = document;
    
          var f = d.createElement('form');
          f.action = 'http://gtmetrix.com/analyze.html?bm';
          f.method = 'post';
          var i = d.createElement('input');
          i.type = 'hidden';
          i.name = 'url';
          i.value = tab.url;
          f.appendChild(i);
          d.body.appendChild(f);
          f.submit();
        });
      }, false);
    }, false);

      细心的人不难发现,上面的代码就是向某个网站发一个post请求,checkPage其实是注册了click事件的,一旦按钮被点击了,我们就会获取到当前活动Tab并且执行一些js代码。

      那么怎么测试我们的插件呢?在Chrome地址栏输入chrome://extensions,打开开发者模式,然后点击加载已解压的扩展程序,选择相对应的目录就OK了,如果你的插件修改过,别忘了点一下重新加载(Ctrl+R)按钮。

      最终效果如下:

    总结

      因为Chrome插件涉及的知识点很多,所以一次也讲不完,以后如果有时间,我会把我学到的东西和大家分享,另外这个插件也是我这2天学的,因为公司要做一个信息自动刷新的功能,所以才想到了Chrome插件,不过很可惜,竞赛完了,我并没得奖,也小小吐槽下吧。

  • 相关阅读:
    119. Pascal's Triangle II
    118. Pascal's Triangle
    112. Path Sum
    111. Minimum Depth of Binary Tree
    110. Balanced Binary Tree
    108. Convert Sorted Array to Binary Search Tree
    88. Merge Sorted Array
    83. Remove Duplicates from Sorted List
    70. Climbing Stairs
    陌陌面试经历
  • 原文地址:https://www.cnblogs.com/kmsfan/p/5300308.html
Copyright © 2011-2022 走看看