原文地址：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. 【依赖注入】Unity和Autofac

    全面理解ASP.NET Core依赖注入:https://www.cnblogs.com/jesse2013/p/di-in-aspnetcore.html MSDN:https://docs.mic ...

  2. java.lang.ClassCastException: class com.sun.jersey.core.impl.provider.entity.XMLJAXBElementProvider$Text

    Text的包导错了 不是:import com.sun.jersey.core.impl.provider.entity.XMLJAXBElementProvider.Text; 而是:import ...

  3. android -------- 压缩图片文件工具类

    项目中常常遇到文件压缩问题,上传文件大小限制 今天简单的分享一点干货,文件压缩,图片压缩,压缩Bitmap 主要通过尺寸压缩和质量压缩,以达到清晰度最优 效果图 源码地址: https://githu ...

  4. hadoop集群中动态添加节点

    集群的性能问题需要增加服务器节点以提高整体性能 https://www.cnblogs.com/fefjay/p/6048269.html hadoop集群之间hdfs文件复制 https://www ...

  5. MySQL自增序列-亲试ok

    #1.创建sequence表,公共的 DROP TABLE IF EXISTS sequence; CREATE TABLE sequence (      name VARCHAR(30) NOT ...

  6. Charles 抓包工具

    参考博客: https://blog.csdn.net/mxw2552261/article/details/78645118 发包与改包: https://blog.csdn.net/b722305 ...

  7. Vue(九) 自定义指令

    前面介绍了许多 Vue 内置的指令,比如 v-if.v-show等,这些丰富的指令能满足我们绝大部分的业务需求,不过在需要一些特殊功能时,我们仍然希望对 DOM 进行底层的操作,这时就要用到自定义指令 ...

  8. erlang大法好

    可惜haxe不能生成erlang.不过没关系,s6k输入法的实际执行方案,现在由typescript改用haxe.cdt3的ts地位不变. 以后这个博客大部分内容都是跟haxe/typescript相 ...

  9. python笔记9-字符串操作

    1.定义字符串 字符串有下标从0开始,用[]可以来取下标 2.字符串读取 字符串可以使用循环for,每次取一个取出,循环对象的每个元素 3.字符串修改-字符串不可修改 字符串是不可变变量,一旦定义就不 ...

  10. 阶段01Java基础day21IO流02

    21.01_IO流(字符流FileReader) 1.字符流是什么 字符流是可以直接读写字符的IO流 字符流读取字符, 就要先读取到字节数据, 然后转为字符. 如果要写出字符, 需要把字符转为字节再写 ...