我最近写了一个浏览器的插件——网页表格拷贝器 Table Copier。顾名思义，其功能是可以快速方便将网页中的表格以Markdown、HTML、Office Excel 等格式拷贝到剪贴板，方便粘贴到其他地方。

功能特点

界面简洁，操作简单，支持多种格式拷贝。

只要勾选显示表格拷贝按钮，即会在页面表格上方插入一组按钮，点击按钮即可将表格拷贝到剪贴板。

同时支持快捷键操作，按下 Alt + C 即可将表格拷贝到剪贴板。

也做了多语言，中英文自动切换。

安装使用

谷歌应用商店 Chrome Web Store

Table Copier

微软 Edge Add-ons

Table Copier

开发背景

拷贝页面中的表格，并不是一个非常高频的需求。偶尔需要，可以手动复制。

有时候，需要将表格拷贝到 Markdown 格式，然后粘贴到博客中。程序员会打开浏览器的开发者工具，查看表格的 HTML 结构，拷贝到在线表格转换工具，再将转换后的 Markdown 格式拷贝到博客中。比如，以下表格工具就非常好用：

Table Convert Online - Simplify Your Table Conversion Tasks

我这样使用了很多次，感觉还是有点麻烦。于是，就写了一个油猴脚本来解决该问题。

后来，我发现，这个需求还是有点通用的。于是，就写了一个浏览器插件，支持 Chrome 和 Edge 浏览器。

技术实现

功能很简单，就是在页面中插入一组按钮，点击按钮即可将表格拷贝到剪贴板。除了一点转换格式的代码，就是浏览器插件开发的规范。

浏览器插件开发

浏览器插件开发，最主要是看谷歌官方的文档。谷歌官方文档写得非常详细，有很多例子，很容易上手。

扩展程序 / 使用入门  |  Get started  |  Chrome for Developers

表格转换

拷贝到 HTML 非常简单，就是 table.outerHTML。

拷贝到 Markdown ，就需要遍历表格的每一行，每一列，然后拼接成 Markdown 格式。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

function tableToMarkdown(table) {
  let markdown = '';
  for (let row of table.rows) {
    let rowText = '| ';
    for (let cell of row.cells) {
      rowText += cell.innerText + ' | ';
    }
    markdown += rowText + '\n';
  }
  return markdown;
}

拷贝到Excel，就需要将HTML转换成Blob，然后写入剪贴板。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

function tableToExcel(table) {
    const blob = new Blob([table.outerHTML], { type: "text/html" });
    const tableHtml = new ClipboardItem({ "text/html": blob });

    navigator.clipboard.write([tableHtml]).then(function () {
        console.log('Async: Copying to clipboard was successful!');
    }, function (err) {
        console.error('Async: Could not copy text: ', err);
    });
}

上架发布

这个插件功能简单，所以开发很简单。其最大难度是在上架发布。

Chrome Web Store 和 Edge Add-ons 都需要注册开发者账号，然后提交审核。审核通过后，即可上架发布。

Edge Add-ons 免费注册。 Chrome Web Store 需要付费注册，一次性 5 美元。

上传资料

传了上传代码Zip包，还要上传图标，截图，描述等资料。按要求提供即可。

我还是被Reject了一次，原因是没有提供隐私政策。我就找了个具体的隐私网页，再次提交审核，就通过了。

Chrome Web Store 审核周期2-3个工作日，Edge Add-ons 审核周期6-7个工作日。