复制攻防第一轮：当用户可以“编辑”网页

第一轮不采用传统教程的风格，不会马上提供代码，而是给出问题与相关建议，期望读者先自行解决。理由在之前的文章中提到过：写代码比读代码难得多，读者不自己开始写，是学不会的。

现在，你需要通过浏览器插件，突破防复制网页第一版的限制，成功复制出网页内容。

核心思路是让用户可以编辑网页，然后用剪切绕过该网页对复制的限制。比方说，点击一下工具栏的图标，网站就变成可编辑的了。新手建议使用之前提到过的代码模板。

逐步提示

搜索关键词提示1

JavaScript 网页可编辑

搜索关键词提示2

chrome scripting api

注意可以在官方文档网站搜索。

相关文档

核心代码的参考实现

实现方式可以有很多种，不一定要完全一致。比方说，这里使用了executeScript调用函数的方式，你也可以用执行代码文件的方式；你觉得contentEditable不够，加个designMode也行。

const pageEditable = (isEditable) => {
    document.body.contentEditable = isEditable;
}

chrome.scripting.executeScript({
  target: {
    tabId: tab.id,
    allFrames: true,
  },
  function: pageEditable,
  args: [text === 'ON']
});

完整的service_worker.js 参考

同样的，这并不是唯一解。如果你真的自己做过，那么可以体会到短短的代码背后可能要付出怎样的精力。

const on = 'ON';
const pageEditable = (isEditable) => {
    document.body.contentEditable = isEditable;
}

chrome.action.onClicked.addListener(async (tab) => {
    let text = await chrome.action.getBadgeText({ tabId: tab.id });

    if (text === on) {
        text = ''
    } else {
        text = on;
    }

    chrome.action.setBadgeText({ tabId: tab.id, text: text });

    const isEditable = text === on;

    chrome.scripting.executeScript({
        target: {
            tabId: tab.id,
            allFrames: true,

        },
        function: pageEditable,
        args: [isEditable]
    });
});

实现后总结

别忘了，你是来学习浏览器插件的，而不只是实现一个就能拍拍手走了。现在来挖掘一下这个插件相关的知识。

表面上看：

通过chrome.action，背景脚本（background script）可以控制工具栏
通过chrome.scripting.executeScript，背景脚本可以直接影响到用户正在查看的内容（标签页、tab）

思考更深一点，现在已经出现三类东西：背景脚本、工具栏、标签页。它们之间的关系是怎样的？再考虑到不同标签页、不同浏览器窗口呢？

下节预告

也许你也发现了，这样通过剪切绕过的方式，无法绕过防复制网页第二版的限制。

复制攻防第二轮就将解决这个问题。考虑到制作难度，第二轮将采用偏传统教程的方式，在第二轮的基础上，将第三轮作为练习。

顺带一提，由于实现思路有较大差异，第二轮会重新从模板开始，也不假设读者对chrome.scripting有所了解。如果你实在讨厌第一轮这种教学方式，也可以直接从第二轮开始读。

复制攻防第一轮：当用户可以“编辑”网页 ​

逐步提示 ​

实现后总结 ​

下节预告 ​

复制攻防第一轮：当用户可以“编辑”网页

逐步提示

实现后总结

下节预告