欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

使用 Create-React-App 开发 Chrome 扩展

程序员文章站 2022-07-08 20:23:15
整理 Kindle 标注、书签和笔记从未如此简单！ Kindle 标注管理应用 "Kindle Mate" 只支持 Windows，不支持 Mac。标注只是解析 我的剪贴 文本文件，配合 "FileReader" API，写个 Chrome 扩展解析文本文件就好了。

整理 kindle 标注、书签和笔记从未如此简单！

kindle 标注管理应用 kindle mate 只支持 windows，不支持 mac。标注只是解析我的剪贴文本文件，配合 filereader api，写个 chrome 扩展解析文本文件就好了。

初始化项目

安装 react 脚手架 create-react-app

npm i -g create-react-app

初始化项目

create-react-app my-clippings --typescript

--typescript 表示使用 typescript。强烈推荐使用 ts，vue 3.x 使用 ts 重写，angular 2.x+ 只能使用 ts，ts 是大势所趋。

删除 src/serviceworker.ts 文件，用不着。

支持 sass

安装 node-sass 即可。
若要支持 css modules，文件名从 index.scss 改为 index.module.scss 即可。

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();

上传到 chrome 网上应用商店

chrome 网上应用商店上传地址是 。

上传应用需要支付 5 美元的开发者费用。对于没有信用卡的人来说，淘宝可以找到相关代付途径，或者寻求朋友帮助。

支付完成就可以上传应用了，一个账号最多上传 20 个应用。

首发

上一篇： js常用的数组方法

下一篇： 全球首款！一加7 Pro获HDR10+认证：较HDR10都有哪些不同？

推荐阅读