原文地址：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. 压力测试+接口测试(工具jmeter)

      jmeter是apache公司基于java开发的一款开源压力测试工具,体积小,功能全,使用方便,是一个比较轻量级的测试工具,使用起来非常简单.因 为jmeter是java开发的,所以运行的时候必须 ...

  2. 另一道不知道哪里来的FFT题

    给定一个序列,求出这个序列的k阶前缀和,模998244353,n<=1e5. k阶前缀和可以看成一个一个n*k的平面上的二维行走问题. 第i项对第j项的贡献是从(i,0)走到(j,k)的NE L ...

  3. 『TensorFlow』读书笔记_简单卷积神经网络

    如果你可视化CNN的各层级结构,你会发现里面的每一层神经元的激活态都对应了一种特定的信息,越是底层的,就越接近画面的纹理信息,如同物品的材质. 越是上层的,就越接近实际内容(能说出来是个什么东西的那些 ...

  4. linux服务管理 服务管理

    系统的运行级别 运行级别 0 关机(不能设置) 1 单用户模式,类似windows的安全模式 2 不完全的命令行模式,不含NFS服务(文件共享的服务) 3 完全的命令行模式,就是标准字符界面 4 系统 ...

  5. vs2013打包安装程序

    安装扩展包Visual Studio Installer VS2013下默认是没有Visual Studio Installer的,需要安装对应的扩展包: 下载地址:VS2013安装向导扩展包下载 安 ...

  6. JS之event flow

    DOM事件流 1.定义: DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素节点与根结点之间的路径传播,路径所经过的结点都会收到该事件,这个传播过程可称为DOM ...

  7. day33-python阶段性复习七

    rc脚本练习 #!/usr/bin/env python #coding:utf8 import sys import os from subprocess import Popen, PIPE cl ...

  8. springboot+thymeleaf+springbootJPA实现一个简单的增删改查

    1.springboot是什么,给我们带来了什么方便? 通过阅读springboot的书籍发现springboot最便利的是为我们自动配置了很多的东西,几乎可以实现无xml,甚至简单的无sql,为我们 ...

  9. wed

    先有一个无后缀的flag 文件 第一次改成 TXT 收索FLAG 得到了一段 flag.txt f返回到第一次修改后缀 改成RAR 打开RAR 发现一个 flag.txt 的文件 打开,即得到 fla ...

  10. 二,编程语言类别,和python变量基础

    编程语言类别 机器语言:由二进制组成,直接控制操作硬件,执行效率高,开发效率低. 汇编语言:用英文代替二进制,直接操作控制硬件,执行效率高,开发效率低. 高级语言: 编译型,如C语言,类似谷歌翻译,先 ...