使用 Create-React-App 開發 Chrome 擴展

時間 2019-11-17

標籤使用 create react app 開發 chrome 擴展欄目 React 简体版

原文原文鏈接

整理 Kindle 標註、書籤和筆記從未如此簡單！javascript

Kindle 標註管理應用 Kindle Mate 只支持 Windows，不支持 Mac。標註只是解析個人剪貼文本文件，配合 FileReader API，寫個 Chrome 擴展解析文本文件就行了。css

Chrome 下載地址html
Github 地址java

初始化項目

安裝 React 腳手架 create-react-appnode

npm i -g create-react-app
複製代碼

初始化項目react

create-react-app my-clippings --typescript
複製代碼

--typescript 表示使用 typescript。強烈推薦使用 ts，Vue 3.x 使用 ts 重寫，Angular 2.x+ 只能使用 ts，ts 是大勢所趨。git

刪除 src/serviceWorker.ts 文件，用不着。github

支持 Sass

安裝 node-sass 便可。若要支持 css modules，文件名從 index.scss 改成 index.module.scss 便可。web

npm i -D node-sass
複製代碼

讀取文件

讀取的文件是 Kindle 中的 /documents/My Clippings.txt 文件，Kindle 設置任何語言都是這個文件。只不過在不一樣語言下的顯示不同。使用 FileReader API 能夠輕鬆讀取文本文件。正則表達式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <input type="file" accept=".txt" id="file-upload" />
    <script> const dom = document.querySelector("#file-upload"); dom.onchange = function(event) { const file = event.currentTarget.files[0]; const reader = new FileReader(); reader.readAsText(file); reader.onload = () => { const temp = reader.result; console.log(temp); }; }; </script>
  </body>
</html>
複製代碼

解析文本

要解析的文本爲下面的格式，使用簡單的正則表達式便可解析。 根據 Kindle 設置的語言，中文與英文的格式會稍有不一樣，須要作不一樣的解析。

==========
娛樂至死 (尼爾·波茲曼)
- 您在位置 #1882-1884的標註 | 添加於 2019年6月2日星期日 上午10:07:30

古希臘哲學家在2500年之前就說過，人經常以本身的形象塑造上帝。如今，電視政治又添了新招：那些想當上帝的人把本身塑形成觀衆指望的形象。
==========
娛樂至死 (尼爾·波茲曼)
- 您在位置 #1925-1927的標註 | 添加於 2019年6月2日星期日 上午10:11:09

歷史的消失根本不須要如此殘酷的手段，表面溫和的現代技術經過爲民衆提供一種政治形象、瞬間快樂和安慰療法，可以一樣有效地讓歷史銷聲匿跡，也許還更恆久，而且不會遭到任何反對。
==========
娛樂至死 (尼爾·波茲曼)
- 您在位置 #1961-1963的標註 | 添加於 2019年6月2日星期日 上午10:14:42

自由不是靠關掉電視實現的。電視對於大多數人來講，是生活中最有吸引力的東西。咱們生活在一個絕大多數人不會關掉電視的世界裏。若是咱們不直接從電視獲得某種信息，咱們也會經過其餘人獲得它。
==========
複製代碼

配置 manifest.json

發佈 Chrome 應用須要配置 manifest.json 。更多設置能夠查看開發文檔

{
  "name": "My Clippings", // 擴展名
  "short_name": "Clippings",
  "description": "Organizing your Kindle Highlight、Bookmark and Notes so easy.", // 描述
  "version": "0.0.6", // 版本號，每次提交到 chrome 應用中心
  "version_name": "0.0.6",
  "manifest_version": 2,
  "author": "Steve Xu",
  "browser_action": {
    // 點擊應用圖標的操做
    "default_icon": "icon-48.png",
    "default_title": "My Clippings"
  },
  "homepage_url": "https://github.com/nusr/my-clippings",
  "offline_enabled": true, // 容許離線運行
  "permissions": ["activeTab", "tabs", "storage"], // 使用的 chrome 權限
  "icons": {
    // 圖標
    "16": "icon-16.png",
    "32": "icon-32.png",
    "48": "icon-48.png",
    "64": "icon-64.png",
    "128": "icon-128.png",
    "200": "icon-200.png"
  },
  "content_security_policy": "script-src 'self'; object-src 'self';", // 容許加載的文件
  "background": {
    "scripts": ["background.js"], // 外部運行的 js
    "persistent": false
  }
}
複製代碼

// background.js
// 點擊擴展圖標，打開新的 Tag 頁面
function activeNewTab() {
  var chrome = window.chrome;
  if (!chrome) {
    return;
  }
  chrome.browserAction.onClicked.addListener(function() {
    var url = chrome.extension.getURL("index.html");
    if (window.tabId) {
      chrome.tabs.update(window.tabId, { selected: true });
    } else {
      chrome.tabs.create({ url: url }, function(tab) {
        window.tabId = tab.id;
      });
    }
  });
  chrome.tabs.onRemoved.addListener(function(tabId) {
    if (tabId === window.tabId) {
      window.tabId = null;
    }
  });
}

activeNewTab();
複製代碼