都2021年了，做个Chrome插件给自己吧

着入职时间变长，工作不断的深入，在需要同时处理多个任务的同时，打开几十上百个浏览器 Tab 页就必不可少了，而我的工作几乎都是在各种浏览器 Tab 页之间来回切换，如写文档、学习新知识、处理 Bug 单流转、上线等流程，所以我需要对浏览器的 Tab 页进行精细化管理，以达到精细化管理工作流程的目的，于是乎，我对于浏览器的使用变成了下面几个阶段：

Chrome - 杂乱无章阶段

Chrome - 进行适当整理

Edge - 竖向侧边栏

但是无论浏览器层面提供多少这样或那样的辅助，但毕竟浏览器的职责主要是负责帮助你更好、更快、更高效的浏览网页，并非是帮你管理知识和工作流程，所以如果需要个性化定制的需求，就得自己上手开发啦！毕竟作为程序员，自己动手，丰衣足食嘛。

需求分析

我希望能够开发一个 Chrome 浏览器插件，当前其他浏览器如 Edge、Firefox、Brave，以及其他所有使用 Chromimum 开发的浏览器都是支持 Chrome 插件格式的，而这几大浏览器几乎占据了近 83% 左右的桌面端浏览器市场，所以这个 Chrome 插件可以在我喜欢的浏览器上运行。

以下是 2020.3 到 2021.3 的桌面端浏览器占比数据

这个浏览器支持传统的插件点击弹出栏，以及每次打开一个新 Tab 都能展示我的应用，这样能够帮助我随时了解我当前正在进行的工作，大致形式如下：

弹出栏：

新 Tab：

针对上面需求的形式不知道大家是否比较熟悉了？没错，这个插件的框架形式和掘金的插件类似，我们看下掘金的 Chrome 插件：

弹出框：

新 Tab：

也就是说，在看完本次文章，你基本上拥有了开发一个掘金插件的能力，心动了？

随便一提，我们本次开发插件的技术栈如下：

React + TypeScript，基于 Create-React-App 脚手架搭建

通过先进的技术栈来编写 Chrome 插件。

前置知识

Chrome 插件实际上包含几个部分：

manifest.json 文件，相当于整个项目的入口，里面记录着此插件的 icon 图标展示、弹出框样式文件、新建 Tab 逻辑、选项逻辑、内容脚本逻辑等

background.js，此脚本是在整个浏览器启动或者插件加载之后就会运行的一个脚本文件，它运行在 ServiceWorker 里面，通常用于进行一些前置的数据 storage 存储操作，可以操作所有的 Chrome API

popup.html，插件的弹出框展示的模板内容，可以通过 CSS 控制样式，JavaScript 控制逻辑

options.html，右键插件 icon 时弹出菜单页，点击菜单页里面的选项打开的页面

content.js，此脚本是在你打开一个新的网页的时候，Chrome 浏览器为这个网页注入的一个脚本文件，用于辅助此网页和你的插件进行一个通信，因为插件的运行环境是经过沙盒隔离的，无法直接操作到 DOM，所以需要通过 content 脚本操作 DOM，然后发送给到插件的处理逻辑

上述 5 大文件组成了一个 Chrome 插件所需要的必须元素，逻辑关系如下：

image.png

可以看到，其实开发一个 Chrome 的插件也是使用 HTML/JavaScript/CSS 这些知识，只不过使用场景，每种 JavaScript 使用的权限与功能、操作的 API 不太一样，那么既然是使用基本的 Web 基础技术，我们就可以借助更为上层的 Web 开发框架如 React 等来将 Chrome 插件的开发上升到一个现代化的程度。

最简化插件

确保你安装了最新版的 Node.js，然后在命令行中运行如下命令：

npx create-react-app chrome-react-extension --template typescript

初始化好项目、安装完依赖之后，我们可以看到 CRA 产生的模板代码，其中就有我们需要的 public/manifest.json 文件：

当然内容并没有我们上图那样丰富我们需要做一些修改，将内容改为如下内容：

{
   "name": "Chrome React Extension",
   "description": "使用 React TypeScript 构建 Chrome 扩展",
   "version": "1.0",
   "manifest_version": 3,
   "action": {
       "default_popup": "index.html",
       "default_title": "Open the popup"
   },
   "icons": {
       "16": "logo192.png",
       "48": "logo192.png",
       "128": "logo192.png"
   }
}

上述的字段说明如下：

name：插件的名字，展示在 Chrome 插件 icon 里面，以及插件市场等

description：简介插件时干嘛的

version：插件当前的版本

manifest_version：当前使用的 manifest 文件的版本，Chrome 插件最小的 manifest 版本是 V3

action：控制点击插件 icon 时的需要反应的动作（action），这里我们设置 hover 时展示的文字为 default_title，点击打开展示的内容为 index.html

icons：为展示在 Chrome 插件里面的图标

实际上 Chrome 插件只能理解原生的 JavaScript，CSS，HTML 等，所以我们使用 React 学完之后，需要进行构建，将构建的产物打包给到浏览器插件去加载使用，在构建时，还有一个需要注意的就是，为了保证最优化性能，CRA 的脚本在构建时会将一些小的 JS 文件等，内联到 HTML 文件中，而不是打包成独立的 JS 文件，在 Chrome 插件的运行环境下，这种形式的 HTML 是不支持的，会触发插件的 CSP（内容安全策略）错误。

所以为了测试我们的插件当前效果，我们修改构建脚本，在 package.json 里面：

"scripts": {
    "start": "react-scripts start",
    "build": "INLINE_RUNTIME_CHUNK=false react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

通过设置 INLINE_RUNTIME_CHUNK=false 确保所有的 JS 会构建成独立的文件，然后引入到 HTML 中加载使用。

一切准备完毕，是时候构建我们的 React 应用了~ 在命令行中运行如下命令：

npm run build

会发现内容构建输出在 build/xxx 下面，包含 manifest.json、index.html、对应的 JS/CSS 文件还有图片等，其中 manifest 中索引了 index.html 来作为点击插件时的 Popup 的展示页，这个时候我们就可以使用 Chrome 加载我们构建好的文件，来查看插件运行效果了：

我们打开扩展程序面板，设置开发者模式，然后点击加载文件，选择我们的 build 文件地址加载：

Magic ！我们可以在浏览器里面看到我们的插件，并使用它了，一个最简化插件完成！

当然这里我们虽然能够使用 React/TypeScript 以及一切现代的 Web 开发技术来写插件，但是目前没有很好的方式能够实时的进行开发-查看效果，就是我们常见的 HMR、Live Reload 这种技术暂时还没有很好的支持到 Chrome 插件的开发，所以每次我们需要查看编写的效果都需要构建之后点击插件查看。

当然如果纯针对 UI 或者和 Chrome API 无关的逻辑，那么你可以放心的直接在 Web 里面开发，等到开发完毕再构建到 Chrome 插件预览即可。

定制新 Tab 逻辑

我们之前的逻辑是，只要新开一个 Tab，那么就会访问我们提供的页面，类似掘金的插件，而且我们也主要到，其实针对 Popup 页面只是几个按钮，而重头戏都在新 Tab 页界面展示，也就是我们这里其实需要一个多页应用？因为最终要生成页面，一个用在 Popup 页面展示，一个用在新 Tab 页展示。

但是我们知道 CRA 脚手架生成的模板是主要用于单页应用，如果需要切换到多页应用有一定的成本，但是我们的 Popup 页面实际上就只有几个按钮，所以这里可以做一层简化，即 Popup 页面直接手动写最原始的 HTML/JS/CSS，然后将重头戏、复杂的新 Tab 页的逻辑来用 React TypeScript 等现代 Web 技术来开发。

通过这样设计之后，我们的目录结构变成了如下形式：

其中 manifest.json 的逻辑变成了如下：

{
  "name": "Chrome React SEO Extension",
  "description": "The power of React and TypeScript for building interactive Chrome extensions",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "./popup/index.html",
    "default_title": "Open the popup"
  },
  "chrome_url_overrides": {
    "newtab": "index.html"
  },
  "icons": {
    "16": "logo192.png",
    "48": "logo192.png",
    "128": "logo192.png"
  }
}

我们可以看到，点击 Chrome 插件弹出的页面 Popup，换成了 ./popup/index.html ，而我们新加了一个 chrome_url_overrides 字段，在 newtab 时，我们打开构建后的 index.html 文件。

通过上面的操作，我们每次打开一个新 Tab，都会展示下面的页面：

完美！我们已经实现了掘金的插件的核心思想：便捷的获取技术知识，就在你每次打开 Tab 时。

开发 Popup 页面

接下来我们尝试改造一下我们的 Popup 页面，同样是对标掘金，我们知道掘金的 Popup 页面是一个比较简单的菜单栏，里面主要是一些用于跳转到新 Tab 或者设置页的操作：

我们现在也需要实现类似的点击某个按钮，跳转到我们新 Tab 页，打开我们上一部分定制的 Tab 逻辑。

这一部分我们就需要修改 popup/index.html ，添加相关的 JS 逻辑如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fake Juejin Extensions</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <ul>
      <li class="open_new_tab">打开新标签页</li>
      <li class="go_to_github">访问 Github</li>
      <li class="go_to_settings">设置</li>
    </ul>
    <script src="popup.js"></script>
  </body>
</html>

这一次需求我们只会操作打开新标签页、访问 Github，设置我们不做操作，留给读者自己去扩展。

可以看到我们导入了 popup.js 文件，在这个 JS 文件里，我们需要完成对应打开新标签页、和访问 Github 的逻辑配置：

document.querySelector(".open_new_tab").addEventListener("click", (e) => {
  chrome.tabs.create({}, () => {});
});

document.querySelector(".go_to_github").addEventListener("click", (e) => {
  window.open("https://github.com");
});

可以看到，因为 popup.js 是运行在 Chrome 插件的沙箱环境下的，所以它能够使用到 chrome 这个 API，进行页面、浏览器等相关的操作。

当我们写入了上述逻辑之后，我们就可以点击对应的打开新标签页，访问新标签页并展示我们上一节说到的内容，访问 Github，则会跳转到 Github 页面。

使用 Content 脚本

我们已经开发了新 Tab 页，开发了 Popup 逻辑，接下来我们可以尝试一下通过 content 脚本，来实现用户页面与插件脚本进行通信，以间接的操作 DOM。

首先我们需要在 manifest.json 里面注册 content 相关的脚本：

{
  "name": "Chrome React Extension",
  // ...
  "permissions": ["activeTab", "tabs"],
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["./static/js/content.js"]
    }
  ]
}

上述脚本通过 content_scripts 指定 content 脚本，matches 指定匹配到那些域名时，才执行这个注入脚本的逻辑，js 代表需要注入的脚本的位置，这里我们填写的为 ./static/js/content.js ，即为通过构建之后产生的 JS 内容地址。

接着我们在 Tab 页的 React 项目里面去建立与 content 脚本的通信：

import React from "react";
import "./App.css";
import { DOMMessage, DOMMessageResponse } from "./types";

function App() {
  // 前置逻辑

  React.useEffect(() => {
    /**
     * We can't use "chrome.runtime.sendMessage" for sending messages from React.
     * For sending messages from React we need to specify which tab to send it to. */     chrome.tabs &&
      chrome.tabs.query(
        {
          active: true,
          currentWindow: true,
        },
        (tabs) => {
          /**
           * Sends a single message to the content script(s) in the specified tab,
           * with an optional callback to run when a response is sent back.
           *
           * The runtime.onMessage event is fired in each content script running
           * in the specified tab for the current extension. */           chrome.tabs.sendMessage(
            tabs[0].id || 0,
            { type: "GET_DOM" } as DOMMessage,
            (response: DOMMessageResponse) => {
              setTitle(response.title);
              setHeadlines(response.headlines);
            }
          );
        }
      );
  });

  return (
    // ... 模板
  );
}

export default App;

可以看到我们通过 chome API，去查询当前正在激活的 Tab 页，然后给这个 Tab 页的 content 脚本，通过 chrome.tabs.sendMessage 发了一个 { type: "GET_DOM" } 的消息。

然后我们创建对应的 content 的脚本，在 src/chromeServices 下创建 DOMEvaluator.ts：

import { DOMMessage, DOMMessageResponse } from "../types";

// Function called when a new message is received const messagesFromReactAppListener = (
  msg: DOMMessage,
  sender: chrome.runtime.MessageSender,
  sendResponse: (response: DOMMessageResponse) => void
) => {
  console.log("[content.js]. Message received", msg);

  const headlines = Array.from(document.getElementsByTagName<"h1">("h1")).map(
    (h1) => h1.innerText
  );

  // Prepare the response object with information about the site   const response: DOMMessageResponse = {
    title: document.title,
    headlines,
  };

  sendResponse(response);
};

/**
 * Fired when a message is sent from either an extension process or a content script. */ chrome.runtime.onMessage.addListener(messagesFromReactAppListener);

这个脚本在加载的时候，通过 onMessage.addListener 监听，然后回调 messagesFromReactAppListener ，在函数里面，可以直接获取 DOM，查询这个页面中的标题和所有的 H1 标签，然后返回。

import React from "react";
import "./App.css";
import { DOMMessage, DOMMessageResponse } from "./types";

function App() {
  const [title, setTitle] = React.useState("");
  const [headlines, setHeadlines] = React.useState<string[]>([]);

  // ...消息通信逻辑

  return (
    // ... 模板
    <div className="App">
      <h1>SEO Extension built with React!</h1>

      <ul className="SEOForm">
        <li className="SEOValidation">
          <div className="SEOValidationField">
            <span className="SEOValidationFieldTitle">Title</span>
            <span
              className={`SEOValidationFieldStatus ${
                title.length < 30 || title.length > 65 ? "Error" : "Ok"
              }`}
            >
              {title.length} Characters
            </span>
          </div>
          <div className="SEOVAlidationFieldValue">{title}</div>
        </li>

        <li className="SEOValidation">
          <div className="SEOValidationField">
            <span className="SEOValidationFieldTitle">Main Heading</span>
            <span
              className={`SEOValidationFieldStatus ${
                headlines.length !== 1 ? "Error" : "Ok"
              }`}
            >
              {headlines.length}
            </span>
          </div>
          <div className="SEOVAlidationFieldValue">
            <ul>
              {headlines.map((headline, index) => (
                <li key={index}>{headline}</li>
              ))}
            </ul>
          </div>
        </li>
      </ul>
    </div>
  );
}

export default App;

然后扩展一下 CSS 代码：

.App {
  background: #edf0f6;
  padding: 0.5rem;
}

.SEOForm {
  list-style: none;
  margin: 0;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%);
  background: #fff;
  padding: 1rem;
}

.SEOValidation {
  margin-bottom: 1.5rem;
}

.SEOValidationField {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.SEOValidationFieldTitle {
  font-size: 1rem;
  color: #1a202c;
  font-weight: bold;
}

.SEOValidationFieldStatus {
  color: #fff;
  padding: 0 1rem;
  height: 1.5rem;
  font-weight: bold;
  align-items: center;
  display: flex;
  border-radius: 9999px;
}

.SEOValidationFieldStatus.Error {
  background-color: #f23b3b;
}

.SEOValidationFieldStatus.Ok {
  background-color: #48d660;
}

.SEOVAlidationFieldValue {
  overflow-wrap: break-word;
  width: 100%;
  font-size: 1rem;
  margin-top: 0.5rem;
  color: #4a5568;
}

Nice！我们成功编写了新 Tab 页模板、逻辑与样式，以及创建了 Content 脚本逻辑，最后我们的展示效果如下：

然后我们需要进行代码构建，因为 content 我们使用 TypeScript 语法写，将 content 的逻辑构建为单独的 JS 输出，我们安装 craco 依赖，然后修改对应的脚本：

yarn add -D craco

// package.json
"scripts": {
    "start": "react-scripts start",
    "build": "INLINE_RUNTIME_CHUNK=false craco build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

将 react-scripts 改为 craco 。

然后新建 craco.config.js ，添加如下内容：

module.exports = {
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      return {
        ...webpackConfig,
        entry: {
          main: [
            env === "development" &&
              require.resolve("react-dev-utils/webpackHotDevClient"),
            paths.appIndexJs,
          ].filter(Boolean),
          content: "./src/chromeServices/DOMEvaluator.ts",
        },
        output: {
          ...webpackConfig.output,
          filename: "static/js/[name].js",
        },
        optimization: {
          ...webpackConfig.optimization,
          runtimeChunk: false,
        },
      };
    },
  },
};

准备完毕，开始构建：yarn`` build ，我们会发现构建目录输出如下：

写在最后

在本篇文章中，我们完整体验了使用 React+TypeScript，开发新 Tab 内容展示页以及 content 通信脚本，然后通过配置 react-scripts 为 craco 进行了分文件构建，以及直接开发原生的 popup 页，通过这种融汇的技术，成功开发出了一个类似掘金框架的 Chrome 插件。

这篇文章没有介绍的有 background 脚本，以及整体插件内容还不够完善，希望有兴趣的读者可以继续探索，将其完善。

❤️/ 感谢支持 /

以上便是本次分享的全部内容，希望对你有所帮助^_^

喜欢的话别忘了分享、点赞、收藏三连哦~

欢迎关注公众号 程序员巴士，来自字节、虾皮、招银的三端兄弟，分享编程经验、技术干货与职业规划，助你少走弯路进大厂。

ord可以说是当前最主流的论文写作工具之一，尽管其基础功能强大，但是总有一些小功能尚未集成。这时候，安装插件往往能够解决我们的燃眉之急。

今天小编给大家分享3款提升写作效率的Word插件，学完赶紧用起来吧！

01Office Tab

Word有个缺点颇受诟病——打开多个文件就要新创多个窗口，写论文时在多个窗口间切换可谓劳心劳力。那么Word能否像WPS一样支持多标签页功能呢？

“Office Tab”插件应势而生，这款插件由我国海口的ExtendOffice技术公司推出。ExtendOffice是一家专做Office插件的公司，另一典型产品为Kutools，感兴趣的同学可以自行了解~

言归正传，Office Tab插件分为普通版和企业版，两者唯一的区别是后者在支持Office三件套的基础上，还能接入Publisher、Access、Project和Visio。一般来说我们选择普通版即可。

该插件目前仅支持Windows系统，与

Microsoft Office 2003 / 2007 / 2010 / 2013 / 2016 / 2019以及Office 365兼容。

下载链接：

https://zh-cn.extendoffice.com/download/office-tab.html

图片来源：ExtendOffice官网

文件大小近40M，安装后双击桌面“Office Tab Center”图标，在启用“Tabs for Word”界面点击确定即可在Word中启用多标签页功能。

图片来源：Office Tab Center软件截图

此时打开多个Word文档时同一窗口显示多个标签，点击标签可完成文档间的切换，而点击菜单栏中的“办公标签”可对标签栏进行个性化设置。

图片来源：Word软件截图

目前普通版永久购买的价格是29美元，观望中的小伙伴可以先下载试用（免费试用期30天）。

另外，如果在某些情境中我们需要将窗口平铺时，只需要在“办公标签”中取消勾选“显示标签栏”，同时取消勾选“选项中心”中的“采用单窗口”即可~是不是很方便呢！

02小恐龙公文助手

凡是写过毕业论文的读者应该都经历过被“格式审查”支配的恐惧。如何一键插入空白页？如何高效删除文档中的空格空行？如何快速统一标点格式？明明离毕业就差临门一脚了，却要为论文格式校对熬上几个大夜。

直到最近……小编了解到这款Word排版插件，只能说相见恨晚！虽说它是专为公文写作排版而生，但对论文狗同样适用！

小恐龙公文助手目前仅支持Windows用户，适用于Microsoft Word 2007 / 2010 / 2013 / 2016 / 2019，下载地址：

https://xkonglong.com/xkl_wordaddin/

下载解压，点击“首次安装请导入证书”，接着点击安装文件进行安装。

图片来源：小恐龙公文助手软件安装包截图

正常情况下安装后Word菜单栏会显示“公文”工具，如下图所示：

图片来源：Word软件截图

若插件未能成功显示，最常见的原因是咱们安装了家庭和学生版的Office。这时候可以下载由Excel催化剂作者开发的office插件管理工具（下载地址：

https://www.lanzoui.com/i5CA0gbfq6j）尝试修复。修复步骤按以下截图三步走：

图片来源：office插件管理工具软件截图

插件工具的使用界面细分为6部分，即：版面设置、公文标题设置、文字格式设置、插入、其他以及关于插件的问题查询和反馈。

图片来源：Word软件截图

排除与word原生功能重复以及专用于公文写作的功能，小编给大家推荐能够显著提升论文排版效率的三大利器：文字排版中的若干快速设置、版面设置中的“删除页眉横线”以及插入中的插入横页。傻瓜式操作，便捷快速！

图片来源：Word软件截图

03Grammarly

关注投必得的小伙伴应该对Grammarly这款“网红英文润色软件”已经不陌生了，之前有编辑分享过Grammarly的Edge浏览器插件测评文章（一键帮你解决SCI论文语法错误——Grammarly英文润色软件）。

今天小编给大家分享的是Grammarly的Word插件，Windows和Mac系统下都能用~

安装方法简单粗暴，首先点击“插入”→“获取加载项”，在Office加载项弹窗的搜索栏输入“Grammarly”，找到相应的插件并点击“添加”。

图片来源：Word软件截图

安装完成后菜单栏即出现“Open Grammarly”的logo，直接点击登录即可使用。

图片来源：Word软件截图

使用方法不再赘述，参见：一键帮你解决SCI论文语法错误——Grammarly英文润色软件。以下是Word中应用Grammarly免费版（仅检查拼写、语法）的效果图：

图片来源：Word软件截图

在论文写作过程中即时显示小错误，点击绿色框即可完成推荐修改，十分方便！

你还有哪些好用的Word插件推荐呢？欢迎留言区交流呀~

、OneTab：将无数 Tab 合并在一个页面

很多时候我们在一个窗口打开太多的tab，每一个tab太小不容易管理，这时候使用OneTab能够把所有tab收起放在一个页面，点击就可打开该tab，非常方便。

关注公众号“TJ君”，回复：OneTab，获取插件安装程序

2、Momentum：用Tab页征服你的美女同桌

受够了新建页面时候的空白页的话可以试试，Momentum每天都会提供一张高清大图，都很好看。

关注公众号“TJ君”，回复：Momentum，获取插件安装程序

3、Infinity：用标签页来完成你的常用页面导航

功能强大的新建标签页扩展！做的界面很美，每日壁纸质量也很高！有同步笔记、代办事项等，同时，喜欢它的网页图标，提供了很多常用网站的图标，自定义书签时很好看~唯一的缺点，就是感觉启动比较慢~

关注公众号“TJ君”，回复：Infinity，获取插件安装程序

4、New Tab Startup Quotes：用鸡汤灌溉你的标签页

想学习成功人士的精神和智慧，这个扩展程序可以帮到你，每当你打开一个标签页，它都会显示一位成功人士的格言，不得不说熬得一锅好鸡汤。

关注公众号“TJ君”，回复：QuotesTab，获取插件安装程序

本文转自公众号：TJ君

在线咨询

上一篇：html开发笔记20-合并单元格-列和行
下一篇：想学HTML该从何入手？web前端HTML终极指南

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

都2021年了，做个Chrome插件给自己吧

需求分析

前置知识

最简化插件

定制新 Tab 逻辑

开发 Popup 页面

使用 Content 脚本

写在最后

❤️/ 感谢支持 /

01Office Tab

02小恐龙公文助手

03Grammarly

您的项目需求