码匠笔记

用心雕琢

Chrome自动生成网页目录插件的编写和使用

访问

本文内容概要如下:

1, 怎么样编写Chrome Extension
2, Chrome Extension的项目目录和简单说明
3, 自动生成文章目录的Chrome Extension讲解
4, 编写Chrome Extension过程中遇到的坑
5, 如何为插件编写主题
6, 下载地址

前言

虽然移动设备已经很普遍了,但是大家使用电脑阅读网页的时间还是很长,尤其是做我们这个行业,除了阅读博客,通过网页搜索资料的时间也是比其他行业要多出来很多的。每次遇到特别长的文章的时候,从上到下的翻阅查找重点内容,肉眼的分离段落实在是比较费劲。但是有的网站这方面比较人性化,Hexo的博客系统或者是最近比较火的segmentfault,他们的文章目录就很方便,便于我们快速的定位(如下图)。但是大部分博客或者是贴吧还是没有目录的,于是笔者就突发奇想,自己写一个Chrome的插件,能自动的识别出来文章的目录,于是就有了这篇文章:

SegmentFault

效果展示

如图,简单的展示了一下插件的使用方式。 Chrome Extension Toturial

怎么快速编写Chrome Extension?

首先需要的是翻墙,这个应该是攻城狮必备了吧。然后访问Google的官方Get Started文章即可。里面的通过一个具体的实力详解,非常详细。如果想用更简单的办法,直接clone笔者的Repo,然后修修改改。

简单描述一下Chrome Extension的目录结构

如下是笔者插件项目的目录结构,内容很多,我们挑一些重点说。 Tree
manifest.json是必不可少的,它是插件的入口,包括名字,版本,权限,icon等配置都在这里面。

background.js可以是长时间运行在Extension的生性周期里面长时间运行的脚本,用它来管理一些任务或状态非常方便。他可以这样的原因是如下配置:

manifest.json
1
2
3
4
5
6
"background": {
    "scripts": [
      "background.js"
    ],
    "persistent": true
  }

app.js是使用插件过程中,网页里面可以执行的js文件,原因如下配置:

manifest.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
"content_scripts": [
    {
      "css": [
        "table-of-contents-sidebar.css"
      ],
      "js": [
        "app.js"
      ],
      "matches": [
        "http://*/*",
        "https://*/*"
      ]
    }
  ]

options.html是设置界面,点击插件右键的Options出现的界面。因为manifest.json里面的options_ui配置了。

manifest.json
1
2
3
4
5
"options_ui": {
    "page": "options.html",
    "chrome_style": true,
    "open_in_tab": true
  }

table-of-contents-sidebar.css文件是插件的样式文件,如果需要在修改网页样式的时候使用,需要通过chrome.extension.getURL("table-of-contents-sidebar.css");的方式获取到他的绝对路径,然后写到页面里面使用。
options.css这个是设置页面需要使用的样式,不需要上面那么复杂,因为配置页面就是直接的网页了,可以直接引用:

options.html
1
2
<script src="options.js"></script>
<link rel="stylesheet" href="options.css">

其他的都是一起图片或者是样式资源,没有特别要说的,只要路径对应好就可以了。

插件的实现思路

1.采用遍历h标签作为菜单
2.使用元素距离屏幕的垂直距离来过滤无用标签,笔者初步认为,h
标签高度递增说明一直是一个Section里面的标签,如果有变化,说明已经不对了,所以通过这个方式过滤一部分无用标签。
3.通过原始元素的ID定位锚,但是如果原始元素没有,自动生成一个UUID绑定到原始元素,方便定位。
4.使用获取当前页面的domain实现黑名单拦截功能,过滤掉一些使用者不希望看到目录的页面。 5.使用mouseovermouseout事件实现鼠标移走就自动消失,最大限度的不要遮挡阅读内容。
6.使用LocalStorage实现保持用户搜索的设置,包括黑名单拦截。这样保证重启浏览器配置不会丢失。

踩过的坑

1.Extension使用的icon不能大于190px,所以再设置broswer_action或者是content_menus的时候一定要控制icon大小,因为大小超过以后他不会报错,只是不显示而已。
2.如果是页面想访问Extension资源,需要配置web_accessible_resources访问权限:

manifest.json
1
2
3
4
5
6
"web_accessible_resources": [
    "images/*",
    "table-of-contents-sidebar.css",
    "options.html",
    "themes/*"
  ]

3.修改完代码以后,必须到chrome://extensions/页面强制刷新,不然不会更新。
4.上传第一个Chrome Extension需要交纳7$费用,官方说这是为了验证你的合法性。
5.如果更新的Plugin到商店的话,已经安装的用户会在5小时左右自动更新。Chrome的默认配置是5小时更新一次配置。

下载和使用

直接在Chrome Webstore搜索Table of contents sidebar下载,或者直接点击如下地址https://chrome.google.com/webstore/detail/table-of-contents-sidebar/ohohkfheangmbedkgechjkmbepeikkej安装。操作是非常简单的,所以就不具体说了,如果需要讲解,可以参照插件下载页面的视频(YouTube)。

自定义样式

由于笔者是后端出身,虽然编码前端没问题,但是对于页面美观上面还是差一些。于是笔者提供了一个用户可以简单的编写样式的方式,这样如果想自己编写一个样式并且应用到Chrome Extension的同学,可以按照如下操作。
1.第一步,fork项目代码,clone到自己本地。
2.第二步,load项目到Chrome,需要在开发模式才能load本地的包。
3.第三步,在themes目录添加你自定义样式文件,比如darcula.css。里面的内容仿照table-of-contents-sidebar.css编写即可,里面的元素很清楚。
4.第四步,在options.html里面找到themeselect,添加一个option如下即可:

options.html
1
<option value="themes/darcula.css">Darcula</option>

5.第五步,提交一个Pull Request,我会尽快Accept。 这样你自定义的样式就可以展示在设置页面了。 Chrome Extension Theme

使用愉快

希望这个插件对大家有用,如果有任何问题,可以提IssueGitHub

扩展阅读

  1. 给博客添加目录

作者

本文作者麻酱,欢迎讨论,指正和转载,转载请注明出处。
原文地址:Chrome自动生成网页目录插件的编写和使用
如果兴趣可以关注作者微信订阅号:码匠笔记
majiangbiji

评论