都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

您的項目需求