chrome扩展开发之旅第一篇

lei___ 发布于2019-08-19 17:25 / 879人阅读

摘要：扩展及应用介绍与区别介绍支持开发者为其编写各种各样的扩展与应用来扩充其功能。用处安装扩展之后，就会读取扩展中的文件。结语以上就是第一章的总结，接下来的笔记，敬请期待原书项目代码下载扩展及其应用开发

读书笔记介绍

寒假想自己做一个chrome扩展，便从图书馆借了这本书。同时，为了培养自己的好习惯，做沉淀，便读一章写一篇总结，全书总共10章，将会分为10篇博文。欢迎大家多多指正，也希望大家多多支持，谢谢。

chrome扩展及应用介绍与区别 介绍

chrome支持开发者为其编写各种各样的扩展与应用来扩充其功能。chrome扩展与应用是一系列文件的集合，这些文件包括HTML，CSS，Javascript，images以及一个manifest.json文等。

区别

两者具有很多相似之初，并且两者采用了相同的文件结构。

总的来说，扩展与浏览器结合的更紧密些，更加强调扩展浏览器功能。而应用无法像扩展一样轻易获取用户在浏览器中浏览的内容并进行更改，实际上应用有更加严格的权限限制，所以应用更像是一个独立的与chrome浏览器关联不大的程序。

除此之外，chrome应用还分为Hosted App(托管应用)和PackagedApp(打包应用)。
前者更像是一个高级的书签，这种应用只提供一个图标和manifest.json文件。
后者，顾名思义，就是将所有的文件打包在一起的应用，这类应用通常可以离线使用，因为他们所需要的文件都在本地。

文件结构

+chromApp
  -index.HTML
  -manifest.json
  +images
  +CSS
  +js

与正常开发的结构类似，唯一多了的一个是manifest.json这个文件。

manifest.json用处
安装扩展之后，chrome就会读取扩展中的manifest.json文件。这个文件的文件名固定为manifest.json。内容是按照一定格式描述的扩展相关信息，如扩展名称，版本，更新地址，请求的权限，扩展的UI界面入口。等等，这样chrome才能知道如何在浏览器中呈现这个扩展，以及这个扩展如何与用户进行交互。

manifest.json规范说明
manifest.json必须包含name，version和manifest_version属性，目前来说来manifest_version属性值只能为数字2，对于应用来说，还必须包含app属性。其他常用的可选属性还有browser_action,page-action,background,permissions,options_page,
content_scripts,content_scripts。

当有需要时，请自行到官网查看文档说明。
Manifest File Format

制作第一个扩展 目录结构

  + my_clock
    + images
      - icon128.png
      - icon48.png
      - icon16.png
      - icon38.png
      - icon16.png
    + js
      - my_clock.js
    - manifest.json
    - popup.html

manifest.json

  {
      "manifest_version": 2,
      "name": "我的时钟",
      "version": "1.0",
      "description": "我的第一个Chrome扩展",
      "icons": {
          "16": "images/icon16.png",
          "48": "images/icon48.png",
          "128": "images/icon128.png"
      },
      "browser_action": {
          "default_icon": {
              "19": "images/icon19.png",
              "38": "images/icon38.png"
          },
          "default_title": "我的时钟",
          "default_popup": "popup.html"
      }
  }

popoup.html

my_clock.js

  function my_clock(el){
      var today=new Date();
      var h=today.getHours();
      var m=today.getMinutes();
      var s=today.getSeconds();
      m=m>=10?m:("0"+m);
      s=s>=10?s:("0"+s);
      el.innerHTML = h+":"+m+":"+s;
      setTimeout(function(){my_clock(el)}, 1000);
  }

  var clock_div = document.getElementById("clock_div");
  my_clock(clock_div);

使用说明
将上述代码的文件包拖动至chrome扩展页面，也就是 chrome://extensions/ 即可发现，扩展栏多了一个图标，点击既可显示。
源码下载

调试方法

同样，我们想调试插件的时候，也可以直接右键点击该扩展，审查元素，即会弹出一个开发者工具框，在此便可以开始调试。

结语

以上就是第一章的总结，接下来的笔记，敬请期待～
原书项目代码下载
《chrome扩展及其应用开发》

GPU云服务器云服务器第一篇 chrome webrtc 开发开发扩展扩展开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78503.html

chrome扩展开发之旅第四篇

摘要：目录结构书签历史管理扩展与应用标签书签第一步，在中声明书签的个属性，并不是每个书签都有这个对象，如书签文件夹就不具有属性。调整书签位置更新书签删除书签和空的书签分组删除包含书签的书签分组获取完整的书签内容书签的事件第一步，先行在中声明。目录结构 4.1 书签 4.2 Cookies 4.3 历史 4.4 管理扩展与应用 4.5 标签 4.6 overridePages 4.1 书...

jackwang 2019-08-19 17:26 评论0 收藏0
chrome扩展开发之旅第二篇

摘要：跨域请求跨域问题，是开发中一直以来需要注意的问题。则发送通道的发送给监听此消息的外部扩展。完整方法此处，为必选参数，为回调函数。回调函数接收到的参数有三个，分别是和，即消息内容，消息发送者相关信息和相应函数。是发起消息的标签。第二章简介第二章较第一章复杂许多。书中虽寥寥21页，内容却也不少。涵盖了8个小节。 2.1 操作用户正在浏览的页面 2.2 跨域请求 2.3 常驻后台 2....

shadajin 2019-08-19 17:25 评论0 收藏0
chrome扩展开发之旅第五篇

摘要：目录结构下载网络请求代理系统信息本章讲解的是部分较为高级的，以供哪些有更高要求的读者阅读。对于目前的网络请求，笔记实用的功能包括阻断链接，更改和重定向。系统信息声明方法三个接口都提供了的方法目录结构 5.1 下载 5.2 网络请求 5.3 代理 5.4 系统信息本章讲解的是部分较为高级的API，以供哪些有更高要求的读者阅读。 5.1 下载声明 permissions: [ ...

NotFound 2019-08-19 17:26 评论0 收藏0
chrome扩展开发之旅第三篇

摘要：第三章目录简述右键菜单桌面提醒简述这部分对于前端的人来说是基础。已经将的权限开放了。制作实时查询美元价格的扩展代码部分部分查询美元当日价格图片请自行选用。第三章目录 3.1 CSS简述 3.2 Browser Actions 3.3 右键菜单 3.4 桌面提醒 3.5 omnibox 3.6 Page Actions 3.1 CSS简述这部分对于前端的人来说是基础。就不说了 3...

shuibo 2019-08-22 11:00 评论0 收藏0
hello zapi 项目准备工作-CPP开发PHP之旅第一节

摘要：原文地址在新手学堂里面，我们将从零基于开发一个简单的扩展，这个扩展的名字叫做现在我们着手准备开发需要的环境吧。原文地址: http://www.zendapi.org/manual... 在新手学堂里面，我们将从零基于 zendAPI 开发一个简单的 PHP 扩展，这个扩展的名字叫做 hellozapi , 现在我们着手准备开发需要的环境吧。 demo 的项目库地址 https://...

khs1994 2019-06-28 13:50 评论0 收藏0