1.在磁盘上创建一个目录,用来放应用的代码和资源

2.在这个目录中,创建一个文本文件,命名为manifest.json,其内容为:

{
  "manifest_version": 2,

  "name": "Getting started example",
  "description": "This extension shows a Google Image search result for the current page",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/"
  ]
}

(这里有360浏览器插件制作教程:据说是翻译的chrome浏览器的)

360浏览器应用开放平台

chrome浏览器插件制作官网

3.在应用(扩展)目录中,创建一个名为popup.html的文本文件,增加一些代码

4.回到扩展管理页面,点击“立即更新扩展程序”按钮,这时会重新加载修改后的应用(扩展)

5.点击应用(扩展)的图标,会弹出一个气泡窗口,显示popup.html文件的内容。

完成!!!

给知乎网站插入一段JavaScript代码:配置json如下:

{

"manifest_version": 2,

"name": "知乎头像放大器",

"description": "查看知乎用户头像的原始尺寸图片",

"version": "1.2.1",

"content_scripts": [{
    "matches": ["https://*.zhihu.com/*"],
    "js": ["js/jquery-2.1.4.min.js", "content_action.js"]
  }],

"permissions": [
    "https://*.zhihu.com/*"
  ],

"icons" : {
    "48" : "icon/48.png",
    "128" : "icon/128.png"
  }
}

chrome谷歌浏览器插件制作简易教程的更多相关文章

  1. chrome 谷歌浏览器插件损坏

      Axure RP Extension for Chrome已停用 CreateTime--2017年7月4日10:19:34Author:Marydon 参考地址:http://blog.csdn ...

  2. woocommerce模板制作简易教程

    woocommerce是wordpress里比较好用的电商解决方案,但是制作woocommerce模板相对比较复杂,如果想用woocommerce来建一个展示型的网站,不带下单功能,我们可以很快就能把 ...

  3. Chrome谷歌浏览器插件-小结

    1.小插件库: Tampermonkey https://chrome.google.com/webstore/detail/tampermonkey-beta/gcalenpjmijncebpfij ...

  4. WordPress插件制作教程概述

    接下来的一段时间里,开始为大家讲解WordPress插件制作系列教程,这篇主要是对WordPress插件的一些介绍和说明,还有一些我们需要注意的地方,以及需要掌握的知识. WordPress插件允许你 ...

  5. 阿里巴巴Java开发规约插件p3c详细教程及使用感受

    阿里巴巴Java开发手册 在进入正题介绍这款插件之前,首先来谈一下<阿里巴巴Java开发手册>,2017年年初,首次公开的阿里官方Java代码规范标准手册可以说是引起了全民(IT界)代码规 ...

  6. Chrome插件制作

    由于网上很难找到关于Chrome插件制作的中文教程,为了总结和方便更多的开发者,本文以最常见的显示效果为browser_action的二维码插件为例,进行相关阐述.前端童鞋开发的话应该很简单的,鄙人是 ...

  7. yformater - chrome谷歌浏览器json格式化json高亮json解析插件

    yformater是一款chrome浏览器插件,用来格式化(高亮)服务端接口返回的json数据. 实际上小菜并不是第一个写这种插件的,但是现有的chrome json格式化插件实在是不太好用,索性小菜 ...

  8. WordPress插件制作教程(八): 最后总结

    WordPress插件教程最后一篇,还是为大家简单的做下总结.这次插件制作教程讲的内容和知识点个人觉得不是很多,因为插件制作不单单是这些内容,它涉及的知识很多很多,不是说你会一些函数就可以做出一个好的 ...

  9. WordPress插件制作教程(一): 如何创建一个插件

    上一篇还是按照之前的教程流程,写了一篇WordPress插件制作教程概述,从这一篇开始就为大家具体讲解WordPress插件制作的内容.这一篇主要说一下插件的创建方法. 相信大家都知道插件的安装文件在 ...

随机推荐

  1. [译]Thinking in React

    编者按 使用React的思想来构建应用对我在实际项目中以及帮助他人解决实际问题时起到了很大作用,所以我翻译此文来向那些正在或即将陷入React或React-Native深坑的同胞们表示慰问.网上已经有 ...

  2. AngularJS(1)

    AngularJS(1) 在讲正题之前,先说一下有关angular简介方面的信息: 1. angularJS  诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优 ...

  3. web视频添加webvtt字幕测试

    1.使用MP4硬字幕,如下, 2.使用HTML5 添加webvtt字幕,可惜到现在还没有测试成功.

  4. [LeetCode] Longest Substring with At Most Two Distinct Characters 最多有两个不同字符的最长子串

    Given a string S, find the length of the longest substring T that contains at most two distinct char ...

  5. 协程--gevent模块(单线程高并发)

    先恶补一下知识点,上节回顾 上下文切换:当CPU从执行一个线程切换到执行另外一个线程的时候,它需要先存储当前线程的本地的数据,程序指针等,然后载入另一个线程的本地数据,程序指针等,最后才开始执行.这种 ...

  6. 菜鸟git学习

    基础知识: 安装github之后,所有的命令在git shell 中输入. E:\文档\GitHub [master +2 ~0 -0 !]> cd [ToDoList]E:\文档\GitHub ...

  7. Linux下 JDK安装

    在linux下安装JDK步骤如下: 第一步:查看Linux自带的JDK是否已安装 (1)查看jdk: [root@web-server ~]# rpm -qa|grep jdk ← 查看jdk的信息或 ...

  8. 怎么在MindManager中查看打印预览

    在MindManager2016思维导图中打印导图之前,可以先进行预览,MindManager和其他很多应用程序一样都带有打印预览功能,该功能提供了再次检查的机会,避免打印出错,MindManager ...

  9. spring MVC入门教程

    写一个spring mvc后台传值到前台的一个小例子. 分为以下几个步骤: 1.创建web项目. 导入项目包.具体有如下: spring-aop-4.0.4.RELEASE.jar spring-be ...

  10. html5存储方式localstorage和sessionStorage

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. 区别:localStorage无时间限制,除非主动删除数据,否则永不过期:sessio ...