想有属于自己的谷歌插件么?三分钟带你入门

每个使用谷歌浏览器的人都会留一些称心如意的插件,那你们知道怎么做插件吗?


话不多说,开始教程

首先先大致看一下插件的目录:
想有属于自己的谷歌插件么?三分钟带你入门_第1张图片

  • 1.background.js:
  • 2.index.js:打开某一个网站时调用的js程序。
  • 3.manifest.json(主要文件):扩展程序所查看的配置文件。
  • 4.music.html:点击插件后弹出的窗口框。
  • 5.music.png:插件ico图标。

以上文件,除了manifest.json为必需文件之外,其他均自行调整。本例子为洛雪音乐助手初期文件,当作模板介绍。


首先查看关键文件manifest.json:

{
  "manifest_version": 2, # manifest版本号
  "name": "洛雪音乐助手", # 插件署名
  "version": "0.0.1", # 插件版本号
  "description": "洛雪音乐助手:随时随地一键下载音乐", # 插件介绍
  "author": "Lux", # 作者署名
  "content_scripts": [
    {
      # 选择url场景调用,为全部url网址。
      "matches": [ "https://music.163.com/*" ], 
      # 以上url中调用本地js模块
      "js": [ "index.js" ]
    }
  ],
  "browser_action": {
    "default_icon": "music.png", # 浏览器右上角插件ico
    "default_popup": "music.html" # 点击插件后界面显示
  },
  "icons": {
    "16": "music.png", # 扩展程序中ico图标,默认16*16
    "32": "music.png", # 扩展程序中ico图标,默认32*32
    "128": "music.png" # 扩展程序中ico图标,默认128*128
  },
  "background": {
    # 扩展启动时自动创建一个包含所有指定脚本的页面
    "scripts": [ "background.js" ],
    # Chrome会将指定的HTML文件作为后台页面运行
    "page": [ "" ],
    # 定义了常驻后台的方式,默认为true
    "persistent": false
  }
}

index.js文件为进入网易云音乐网页以及子网页后调用的JavaScript代码文件:

alert("别忘了你还有个网易云音乐插件哦~");

点击插件图标后会显示music.html文件界面:


<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>translationtitle>
    <style>
        *{
            margin:0;
            padding:0;
        }
        span.name {
            white-space: nowrap;
            color: lightpink;
            font-size: 10px;
            padding: 5px;
            background: linear-gradient(to right,red,purple);
        }
    style>
head>
<body>
    <span class="name">洛雪音乐助手  v0.0.1span>
    <div class="music">
	
    div>
body>
html>

之后给上我的music.png图标,就完成了初步的谷歌插件配置。
在这里插入图片描述


接下来。我们就可以上传自己做的谷歌插件到谷歌浏览器中查看样式了!

  1. 首先进入chrome://extensions/网址
  2. 打开开发者模式:
    在这里插入图片描述
  3. 加载已解压的扩展程序:
    在这里插入图片描述
  4. 将我们制作的项目文件夹导入到加载框里。
  5. 找到我们做的程序图标,就已经导入进来了:
    想有属于自己的谷歌插件么?三分钟带你入门_第2张图片
  6. 响当当的欢迎界面:
    想有属于自己的谷歌插件么?三分钟带你入门_第3张图片
  7. 点击插件后还有我们的插件界面可以看到哦~在这里插入图片描述

一步制作crx:

在刚才导入按钮旁边有一个打包扩展程序:
在这里插入图片描述
点击后放入自己的项目文件夹。
方可打包成功。
文件夹目录下生成{{洛雪音乐助手.pem}}以及{{洛雪音乐助手.crx}}俩文件。
分享出去方可直接将crx给自己的朋友们即可使用你的扩展程序包了。


发布谷歌插件库中:

以下链接为发布的步骤:
https://developer.chrome.com/webstore/publish
(似乎第一次发布需要花费¥5,太贵了我就没正式发布)
(注意是5美金哦~ ~ ~)


最后还是希望你们能给我点一波小小的关注。

奉上自己诚挚的爱心

你可能感兴趣的:(笔记)