原文地址：How to Build a Simple Chrome Extension in Vanilla JavaScript

开发一个Chrome扩展程序非常简单，只需要使用原生的js就可以完成，在本文中，我将在几分钟内引导你完成一个简单的扩展程序

关于Chrome扩展程序

Chrome 扩展程序本质上只是一组可以自定义 Google Chrome 浏览器体验的文件。Chrome 扩展程序有几种不同的类型；有些在满足某个特定条件时激活，例如当你来到商店的结账页面时；有些只在你点击图标时弹出；还有些每次打开新标签时都会出现。今年我发布的两个扩展程序都是“新标签”类型的；第一个是 Compliment Dash，这是一个用于保存待办事项列表并赞美用户的 dashboard，第二个是 Liturgical.li，一款针对牧师的工具。如果你知道如何开发简单的网页，那么你就可以毫不费力地开发这类扩展程序。

创建项目文件

首先需要创建一个目录，在目录下创建  index.html,   main.css,  main.js,  manifest.json

index.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Dashboard</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />

</head>

<body>

    <h1>hi，欢迎您</h1>

    <script src="main.js"></script>

</body>

</html>

manifest.json

要在Chrome上运行扩展程序，就必须要一个 manifest.json 文件，你可以在Google的开发人员网站上下载该文件，也可以直接新建 manifest.json文件，并将下面的代码复制进去

{

  "name": "Getting Started Example",

  "version": "1.0",

  "description": "Build an Extension!",

  "manifest_version": 2

}

现在我们更改这段代码的配置

{

  "name": "Simple Greeting Dashboard",

  "version": "1.0",

  "description": "This Chrome extension greets the user each time they open a new tab",

  "manifest_version": 2

  "incognito": "split",

  "chrome_url_overrides": {

    "newtab": "index.html"

  },

  "permissions": [

     "activeTab"

   ]

}

更多其他选项请参考 Chrome开发者文档。

"incognito": "split" 字段会告知 Chrome 在处于隐身模式时如何处理这个扩展程序。

"chrome_url_overrides" 告诉 Chrome 每次打开新标签时都会打开 index.html

"permissions" 的值会在用户试图安装这个扩展程序时，向用户提供一个弹框提示，让他们知道这个扩展程序将覆盖他们的新标签。

上传文件

通过以上信息，你就可以创建自己的新标签Chrome扩展程序，在自定义manifest.json 文件后，你可以通过HTML、CSS、JavaScript设计你想要的任意类型的新标签

当你完成以上配置之后，开始上传，打开 chrome://extensions/ 并切换右上角的开发者模式，将其处于开启状态

刷新页面，点击  加载已解压的扩展程序

选择你存储该文件的目录，打开就可以了，导入成功之后会出现一个新的扩展程序

这样在每次打开新标签都会出现你创建的页面

如何用原生js开发一个Chrome扩展程序的更多相关文章

  1. 跟我一起写一个chrome扩展程序

    在我没有看这本书之前,我都想象不到,原来chrome扩展程序可以这样写,真的非常有意思. 就是用最简单最基础的代码,然后就实现了一些非常有意思的玩意儿. 先看效果图 实际运用要和现实联系在一起,经历和 ...

  2. 前端每日实战：116# 视频演示如何用 CSS 和原生 JS 开发一个监控网络连接状态的页面

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oPjWvw 可交互视频 此视频是可 ...

  3. 如何开发一个chrome扩展

    chrome是一个不错的浏览器,web开发者工作中一般都会使用chrome做为默认浏览器,它有很多扩展,给浏览器补充了各种功能,增强了用户体验.chrome具体能干什么?怎么做出来的呢? chrome ...

  4. 自己写一个chrome扩展程序 - 右键菜单扩展

    最近在学习Spring,心想dotnet如何实现类似形式呢.于是想认真学习Casetle组件,发现没有书籍!而spring的书多得很.于是只好找网上教程了.发现系统的文章不多.Terrylee好多文章 ...

  5. 如何用原生JS实现一个简单的promise

    我又又又回来了,最近真是累的跟狗一样,急需一个大保健回复一下子精力 我现在是一边喝着红牛一边写着博客,好了好了,不扯了,回归整体好吧 先简单来说一下啥是promise吧 它是什么?Promise是一个 ...

  6. Google Chrome 扩展程序开发

    根据公司的规定,每月八小时,弹性工作制.所以大家平时来的不太准时,如果有事,下班也就早些回去了.所以一个月下来工作时间可能不够,但是公司的考勤日历是这样的: 除了请假和法定节假日外,其他样式显示都是一 ...

  7. chrome扩展程序开发之在目标页面运行自己的JS

    大家都知道JS是运行在客户端的,所以,如果我们自己写一个浏览器的话,是一定可以往下载下来的网页源代码中加入js的.可惜我们没有这个能力.不过幸运的是,chrome的扩展程序可以帮我们做到这件事. 本文 ...

  8. chrome扩展程序开发之在目标页面执行自己的JS

    大家都知道JS是执行在client的.所以,假设我们自己写一个浏览器的话.是一定能够往下载下来的网页源码中加入js的.可惜我们没有这个能力.只是幸运的是,chrome的扩展程序能够帮我们做到这件事. ...

  9. 推荐一个有趣的Chrome扩展程序-查看任意网站的开发技术栈

    对于前端开发人员来说,目前的前端框架层出不穷,最受欢迎的莫过于所谓的前端框架三驾马车:Angular, React和Vue.在学习的过程中,肯定好奇现在的互联网公司的网站用的何种前端框架来开发的. C ...

随机推荐

  1. Docker安装Tomcat镜像并部署web项目

    一.安装Tomcat 1.查找Docker Hub上的tomcat镜像 docker search tomcat 2.拉取官方的镜像 docker pull tomcat 等待下载完毕,需要一些时间. ...

  2. Windows下命令行怎样登录MySQL

    直接cmd回车然后 “ mysql -u root -p  ”  登录时出现错误,原来是权限不够 打开cmd时需要以管理员的身份打开 然后继续使用 “ mysql -u root -p ” 还是不行, ...

  3. 【转】前端的BFC、IFC、GFC和FFC

    什么是BFC.IFC.GFC和FFC CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC. FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念. ...

  4. Loadrunner常见的乱码问题

    1.录制的脚本出现了乱码 录制的时候出现乱码,如果不影响回放,我们可以不管它,如果影响回放结果,我们可以使用以下方法解决:     1)更改录制选项         选择菜单栏Tools---> ...

  5. vue教程自学笔记（一）

    一.介绍 1.指令 指令带有前缀v-,以表示它们是Vue提供的特殊特性.eg:v-bind,v-if,v-for,v-on,v-model(实现表单输入和应用状态之间的双线绑定) v-bind跟v-o ...

  6. python命名空间与作用域

    python命名空间与作用域   命名空间是名称与对象之间的关系,可以将命名空间看做是字典,其中的键是名称,值是对象. 命名空间不共享名称. 在命名空间中的名称能将任何python对象作为值,在不同的 ...

  7. C++解析九-数据抽象

    数据抽象 数据抽象是指,只向外界提供关键信息,并隐藏其后台的实现细节,即只表现必要的信息而不呈现细节.数据抽象是一种依赖于接口和实现分离的编程(设计)技术.让我们举一个现实生活中的真实例子,比如一台电 ...

  8. Android 音视频深入 十五 FFmpeg 推流mp4文件（附源码下载）

    源码地址https://github.com/979451341/Rtmp 1.配置RTMP服务器 这个我不多说贴两个博客分别是在mac和windows环境上的,大家跟着弄 MAC搭建RTMP服务器h ...

  9. C#Mvc地址栏传值

    A页面 location.href = "/Home/Bpage?names=" +names; B页面 var loc = location.href;var n1 = loc. ...

  10. java特殊抽象类-接口