当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 使用 Create-React-App 开发 Chrome 扩展

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

2019年07月08日  | 移动技术网IT编程  | 我要评论

整理 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("");
    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 个应用。

首发

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网