原文地址：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. read_csv 的 names 和 index_col 参数作用

  2. [转]静态库、动态库，dll文件、lib文件，隐式链接、显式链接

    转自:https://blog.csdn.net/dcrmg/article/details/53427181 静态链接.动态链接 静态库和动态库分别应用在静态链接方式和动态链接方式中,所谓静态链接方 ...

  3. L0 Regularization

    参考: Learning Sparse Neural Networks through L0 Regularization The Variational Garrote

  4. 关于contenteditable属性

    今天刷刷看看,看到了发说说框,发现居然不是textarea的,百思不得其解围.后来看到contenteditable,心想应该就是这个搞怪的吧,百度了下.w3c的解释是contenteditable属 ...

  5. day063 form 和modelform组件

    注册功能: (写一个简单的注册功能,要求用户名长度不得小于6位.) 普通方式写注册功能  views视图下: def register(request): error_msg=' ' if reque ...

  6. Forth嵌套定义的执行过程图示

    body, table{font-family: 微软雅黑} table{border-collapse: collapse; border: solid gray; border-width: 2p ...

  7. oracle数据库SQL入门

    1.oracle数据库的下载.安装.卸载 Oracle下载: Oracle下载链接地址:http://www.oracle.com/technetwork/cn/database/enterprise ...

  8. like contains

    like :   %/%  = *****/**** contains:     abc    = 字符串中含有  abc

  9. ubuntu1604使用之旅——软件源更新(vim安装)

    sudo cp /etc/apt/sources.list /etc/apt/sources.list.backup sudo gedit /etc/apt/sources.list # deb cd ...

  10. Ubuntu系统下安装免驱动摄像头

    最近想玩一下视频系列的深度学习模型,便网上淘了一个linux下免驱动的摄像头,直接插上usb接口就行,但是一般还不能直接使用,下面将简单说一下如何使用摄像头: 在你的ternimal下输入以下命令: ...