Chrome浏览器扩展程序开发之Hello world

文章目录

  • 效果图
  • 简介
  • 1.新建manifest.json
  • 2.新建popup.html
  • 3.新建helloworld.js
  • 4.加载拓展程序

效果图

Chrome浏览器扩展程序开发之Hello world_第1张图片

简介

Chrome扩展程序平时很常用,比如笔者正在使用的扩展程序有:Google翻译、AdBlocks广告屏蔽、Octotree查看github文件树、SimilarWeb查找相似网站等等。这些扩展程序其实是用Web程序写出来的,使用到的技术有JavaScript、Html、CSS、JSON。

由于JavaScript是一种解释型语言,所以无需安装编译环境,任意一个编辑器都可以开发。笔者使用的VS Code开发,最后的程序结构如下:

Chrome浏览器扩展程序开发之Hello world_第2张图片

1.新建manifest.json

新建一个文件夹,命名为HelloWorld。在文件夹中新建images文件夹,放入一张拓展程序的图标,命名为icon.png,本例中笔者使用的图标是这个:

Chrome浏览器扩展程序开发之Hello world_第3张图片

HelloWorld文件夹中新建manifest.json文件,和AndroidManifest类似,这是一个清单文件,使用的JSON格式,编辑如下:

{
    "manifest_version": 2,
    "name": "Hello world",
    "version": "1.0",
    "description": "我的第一个Chrome扩展",
    "icons": {
        "48": "images/icon.png"
    },
    "browser_action": {
        "default_icon": "images/icon.png",
        "default_title": "Hello world",
        "default_popup": "popup.html"
    }
}

这里用到的属性的含义如下:

  • manifest_version:固定为2。可以理解为表示第二代扩展程序。(在Chrome 18以下此值为1,Chrome 18此值为2。)
  • name:扩展程序商店展示的程序名字
  • version:程序的版本,商店中也会展示
  • description:商店展示的程序描述
  • icons:商店展示的图标,可以有多个分辨率
  • browser_action:浏览器中点击程序图标时触发的动作
    • default_icon:浏览器中展示的程序图标
    • default_title:浏览器中在拓展程序上悬停时显示的程序名字
    • default_popup:点击时弹出的窗口

本例中最后生成的扩展程序在应用商店中展示效果如下:

Chrome浏览器扩展程序开发之Hello world_第4张图片

PS:manifest的所有属性可以在Google官网中查到:https://developer.chrome.com/apps/manifest

2.新建popup.html

manifest中可以看到,default_popup属性值指向一个popup.html文件,那么我们就在HelloWorld文件夹下新建popup.html,编辑如下:

<html>

<head>
    <style>
        body {
            width: 200px;
            height: 100px;
        }

        div {
            line-height: 100px;
            font-size: 22px;
            text-align: center;
        }
    style>
head>

<body>
    <div id="popupWindow">div>
    <script src="js/helloworld.js">script>
body>

html>

这里用到的就是HTMLCSS的基本知识,可以看到我们在style中给body的宽高定义为:200px*100pxdiv块的样式为:行高100px,字体大小22px,文字居中。

body中给div块添加了idpopupWindow,并且加载了一个JavaScript脚本。

3.新建helloworld.js

HelloWorld文件夹中新建js文件夹,在js文件夹中新建helloworld.js文件,编辑如下:

var popupWindow = document.getElementById('popupWindow');
displayMessage(popupWindow);

function displayMessage(popupWindow) {
    popupWindow.innerHTML = "Hello world!";
}

代码很简单,先通过id找到popupWindow元素,然后在窗口中设置显示文字为Hello world!,编辑完成后保存文件。

4.加载拓展程序

在Chrome浏览器中输入chrome://extensions/,然后打开页面右上角的开发者模式,再点击加载已解压的拓展程序,选择HelloWorld文件夹,然后扩展程序列表中就会出现我们自己的扩展程序了,并且浏览器右上角也会出现我们自己的拓展程序图标。

Chrome浏览器扩展程序开发之Hello world_第5张图片

点击浏览器右上角我们自己的扩展程序图标就能弹出Hello world弹窗,这样就完成了开始时的效果图。

你可能感兴趣的:(Chrome浏览器扩展程序开发之Hello world)