@forestsheep 2019-12-02T16:12:35.000000Z 字数 2010 阅读 166

Chrome扩展开发的简介与实战(5)

学习

优秀扩展介绍

Imagus

主要功能

图片跟随鼠标放大。

评价

一页上有很多小图，一个个点开特别麻烦的时候特别好用。不过也不是所有的小图都能放大。这跟网页的写法有关，倒不能说是这款扩展的锅。

Chrome扩展中的网页

概述

在Chrome扩展的开发中，有时候我们需要自己作成网页。那什么哪些地方需要作成呢？有哪些注意点？下面就这方面展开介绍。

分类

我把Chrome扩展的网页分成以下几种：

popup
option
other

顾名思义，popup就是弹出的页面。在这里特指，按了扩展的按钮后所弹出显示的网页。

网页本身的制作和一般意义上的没有什么区别。只是具有一个特殊功能，就是当扩展按钮按下时，它会显示。为了实现这个功能，我们要在manifest里这样写：

manifest.json

{
    "description": "html in chrome ext",
    "manifest_version": 2,
    "name": "sample 5-1: html",
    "version": "1.0",
    "browser_action": {
        "default_title": "many htmls",
        "default_popup": "popup.html"
    }
}

在这里，"browser_action"或是"page_action"二者必选其一，只有这样才能让popup起作用。
但在这里，还有一些区别：
browser_action：只要申明了，按下按钮马上就能弹出网页。
page_action：申明后，需要在js中编程，注明对哪些网页敏感。然后使用时在特定网页下，按下才会弹出网页。
我们在第二课中讲过，browser_action和page_action最主要的区别在于，前者对所有网页敏感，后者对特定网页敏感。所以这就是造成区别的主要原因。

然后我们来制作网页
popup.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>my popup html</title>
</head>
<body>
    <h1>我是popup弹出网页</h1>
</body>
</html>

弹出网页的大小是根据你的内容而定的，你画多大就显示多大。没有规定尺寸的话，就按刚刚好能包住来显示。

option

为选项页面而特制的网页。制作上也是没什么特殊之处，只是需要申明这是选项网页就行。
icon上右键点击会有一个option的选项，点进去就会显示。

manifest.json

{
    "options_page": "option.html"
}

option.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>my option html</title>
</head>
<body>
    <h1>我是option</h1>
</body>
</html>

option网页一般用来保存用户的偏好设置等。一般不用来做其他事情。

other

除popup和option之外的自定义网页。

和popup和option的唯一区别是没有chrome扩展所给的入口。打开的方法是用户输入确切的URL或者是从popup，option的超链接跳转。

tips

内联js将不会被执行，要以文件的形式独立出来。官方文档
js的库不能引用网上资源，要下载下来再引用。(可以通过放松政策来开通)官方文档

课堂练习

要求

结合上节课的存储内容，把一项用户的输入内容存储起来
1. 在option页面上设置输入框
2. 把用户输入的内容存入chrome.storage

提示

结合上节课存储的部分

option.html有可能是类似这样的结构:

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>my option html</title>
</head>
<h1>我是option</h1>
<span>请输入：</span>
<input id="myinput" type="text">
<button id="mybutton">save</button><br>
<button id="getbutton">get value</button>
<input id="getinput" type="text">
<script src="option.js"></script>
</body>
</html>

option.js的逻辑提示:

// getElementById("myinput")
// getElementById("mybutton")
// myButton.onclick = function (...)
// getElementById("getbutton")
// getElementById("getinput")
// getButton.onclick = function (...)