浏览器插件：花体英文转换

最近在学vue，为了尽快上手，做了一个小demo。

一、manifest.json

浏览器插件也是基于html+css+javascript，再加一个必要的json文件描述，

也就是manifest.json

{ "manifest_version": 2, "name": "flourish", "version": "1.0", "description": "change the word and make it more beautiful", "icons": { "96": "icon.png" }, "browser_action": { "default_icon": "icon.png", "default_title": "FlouRish", "default_popup": "page.html" }, "content_security_policy": "style-src 'self' 'unsafe-inline';script-src 'self' 'unsafe-eval'; object-src 'self' ;" }

书写的时候参考了这几个网页：

360浏览器应用开发文档：manifest文件 （据说是把chorme的官方文档翻译了一遍，能够更方便地进行理解）

mainfest配置：常用属性

 

1.概念

manifest.json 是每个 WebExtension 唯一必须包含的元数据文件。
通过使用 manifest.json，您可以指定扩展的基本元数据，例如名称和版本，还可以指定扩展各个方面的功能。

2.必须项

name、version以及mainfest_version都是必填字段。

manifest_version

manifest文件自身格式的版本号。用整数表示，目前为止只接受 2。

3.选择项

(1) icons

拓展图标，可以选择16×16，48×48，128×128三种大小。

如果不配置icons，则拓展工具使用默认图标。

(2) browser_action

■ default_title

鼠标移入，显示扩展的文本描述

■ default_popup

鼠标点击，弹出扩展的模拟窗口，展示内容(一个html文件)

■ default_icon

右上角的扩展图标

 (3) content_security_policy

前端安全配置之Content-Security-Policy(csp)

CSP指的是内容安全策略，为了缓解很大一部分潜在的跨站脚本问题，浏览器的扩展程序系统引入了内容安全策略（CSP）的一般概念。这将引入一些相当严格的策略，会使扩展程序在默认情况下更加安全，开发者可以创建并强制应用一些规则，管理网站允许加载的内容。

指令名	demo	说明
default-src	'self' cdn.example.com	默认策略,可以应用于js文件/图片/css/ajax请求等所有访问
style-src	'self' css.example.com	定义css文件的过滤策略
script-src	'self' js.example.com	定义js文件的过滤策略
object-src	'self'	定义页面插件的过滤策略,如 <object>, <embed> 或者<applet>等元素

 

二、Vue实现数据绑定

html代码：

<div id="app">
    <input v-model="scanf" spellcheck="false">
    <button @click="clear">clear</button>
    <p id="one">{{one}}</p>
    <p id="two">{{two}}</p>
    <p id="three">{{three}}</p>
    <p id="four">{{four}}</p>
    <p id="five">{{five}}</p>
    <p id="six">{{six}}</p>
    <p id="seven">{{seven}}</p>
    <p id="eight">{{eight}}</p>
    <p id="nine">{{nine}}</p>
</div>

js代码：

// 判断字符
function alpha(char) {
  var num;
  if (char >= "A" && char <= "Z") {
    num = char.charCodeAt() - 65;
    return 2 * num;
  } else if (char >= "a" && char <= "z") {
    num = char.charCodeAt() - 97;
    return 52 + 2 * num;
  } else if (char >= "0" && char <= "9") {
    num = char.charCodeAt() - 48;
    return 104 + 2 * num;
  } else {
    return -1;
  }
}

// 处理字符
function alphaBat(char, capital, string) {
  var m = alpha(char);
  if (m >= 0) string += capital.substring(m, m + 2);
  else string += char;
  return string;
}

// 处理字符串
function neat(scanf, capital) {
  var length = scanf.length;
  var str = "";
  for (i = 0; i < length; i++) {
    var char = scanf.charAt(i);
    str = alphaBat(char, capital, str);
  }
  return str;
}

var vm = new Vue({
  el: "#app",
  data: {
    scanf: "",
  },
  methods: {
    clear: function () {
      this.scanf = "";
    },
  },
  computed: {
    one: function () {
      return neat(
        this.scanf,
        "𝐀𝐁𝐂𝐃𝐄𝐅𝐆𝐇𝐈𝐉𝐊𝐋𝐌𝐍𝐎𝐏𝐐𝐑𝐒𝐓𝐔𝐕𝐖𝐗𝐘𝐙𝐚𝐛𝐜𝐝𝐞𝐟𝐠𝐡𝐢𝐣𝐤𝐥𝐦𝐧𝐨𝐩𝐪𝐫𝐬𝐭𝐮𝐯𝐰𝐱𝐲𝐳𝟎𝟏𝟐𝟑𝟒𝟓𝟔𝟕𝟖𝟗"
      );
    },
    two: function () {
      return neat(
        this.scanf,
        "𝑨𝑩𝑪𝑫𝑬𝑭𝑮𝑯𝑰𝑱𝑲𝑳𝑴𝑵𝑶𝑷𝑸𝑹𝑺𝑻𝑼𝑽𝑾𝑿𝒀𝒁𝒂𝒃𝒄𝒅𝒆𝒇𝒈𝒉𝒊𝒋𝒌𝒍𝒎𝒏𝒐𝒑𝒒𝒓𝒔𝒕𝒖𝒗𝒘𝒙𝒚𝒛𝟎𝟏𝟐𝟑𝟒𝟓𝟔𝟕𝟖𝟗"
      );
    },
    three: function () {
      return neat(
        this.scanf,
        "𝓐𝓑𝓒𝓓𝓔𝓕𝓖𝓗𝓘𝓙𝓚𝓛𝓜𝓝𝓞𝓟𝓠𝓡𝓢𝓣𝓤𝓥𝓦𝓧𝓨𝓩𝓪𝓫𝓬𝓭𝓮𝓯𝓰𝓱𝓲𝓳𝓴𝓵𝓶𝓷𝓸𝓹𝓺𝓻𝓼𝓽𝓾𝓿𝔀𝔁𝔂𝔃𝟎𝟏𝟐𝟑𝟒𝟓𝟔𝟕𝟖𝟗"
      );
    },
    four: function () {
      return neat(
        this.scanf,
        "𝕬𝕭𝕮𝕯𝕰𝕱𝕲𝕳𝕴𝕵𝕶𝕷𝕸𝕹𝕺𝕻𝕼𝕽𝕾𝕿𝖀𝖁𝖂𝖃𝖄𝖅𝖆𝖇𝖈𝖉𝖊𝖋𝖌𝖍𝖎𝖏𝖐𝖑𝖒𝖓𝖔𝖕𝖖𝖗𝖘𝖙𝖚𝖛𝖜𝖝𝖞𝖟𝟎𝟏𝟐𝟑𝟒𝟓𝟔𝟕𝟖𝟗"
      );
    },
    five: function () {
      return neat(
        this.scanf,
        "𝖠𝖡𝖢𝖣𝖤𝖥𝖦𝖧𝖨𝖩𝖪𝖫𝖬𝖭𝖮𝖯𝖰𝖱𝖲𝖳𝖴𝖵𝖶𝖷𝖸𝖹𝖺𝖻𝖼𝖽𝖾𝖿𝗀𝗁𝗂𝗃𝗄𝗅𝗆𝗇𝗈𝗉𝗊𝗋𝗌𝗍𝗎𝗏𝗐𝗑𝗒𝗓𝟶𝟷𝟸𝟹𝟺𝟻𝟼𝟽𝟾𝟿"
      );
    },
    six: function () {
      return neat(
        this.scanf,
        "𝗔𝗕𝗖𝗗𝗘𝗙𝗚𝗛𝗜𝗝𝗞𝗟𝗠𝗡𝗢𝗣𝗤𝗥𝗦𝗧𝗨𝗩𝗪𝗫𝗬𝗭𝗮𝗯𝗰𝗱𝗲𝗳𝗴𝗵𝗶𝗷𝗸𝗹𝗺𝗻𝗼𝗽𝗾𝗿𝘀𝘁𝘂𝘃𝘄𝘅𝘆𝘇𝟬𝟭𝟮𝟯𝟰𝟱𝟲𝟳𝟴𝟵"
      );
    },
    seven: function () {
      return neat(
        this.scanf,
        "𝘈𝘉𝘊𝘋𝘌𝘍𝘎𝘏𝘐𝘑𝘒𝘓𝘔𝘕𝘖𝘗𝘘𝘙𝘚𝘛𝘜𝘝𝘞𝘟𝘠𝘡𝘢𝘣𝘤𝘥𝘦𝘧𝘨𝘩𝘪𝘫𝘬𝘭𝘮𝘯𝘰𝘱𝘲𝘳𝘴𝘵𝘶𝘷𝘸𝘹𝘺𝘻𝟶𝟷𝟸𝟹𝟺𝟻𝟼𝟽𝟾𝟿"
      );
    },
    eight: function () {
      return neat(
        this.scanf,
        "𝘼𝘽𝘾𝘿𝙀𝙁𝙂𝙃𝙄𝙅𝙆𝙇𝙈𝙉𝙊𝙋𝙌𝙍𝙎𝙏𝙐𝙑𝙒𝙓𝙔𝙕𝙖𝙗𝙘𝙙𝙚𝙛𝙜𝙝𝙞𝙟𝙠𝙡𝙢𝙣𝙤𝙥𝙦𝙧𝙨𝙩𝙪𝙫𝙬𝙭𝙮𝙯𝟬𝟭𝟮𝟯𝟰𝟱𝟲𝟳𝟴𝟵"
      );
    },
    nine: function () {
      return neat(
        this.scanf,
        "𝙰𝙱𝙲𝙳𝙴𝙵𝙶𝙷𝙸𝙹𝙺𝙻𝙼𝙽𝙾𝙿𝚀𝚁𝚂𝚃𝚄𝚅𝚆𝚇𝚈𝚉𝚊𝚋𝚌𝚍𝚎𝚏𝚐𝚑𝚒𝚓𝚔𝚕𝚖𝚗𝚘𝚙𝚚𝚛𝚜𝚝𝚞𝚟𝚠𝚡𝚢𝚣𝟶𝟷𝟸𝟹𝟺𝟻𝟼𝟽𝟾𝟿"
      );
    },
  },
});

 

三、clipboard.js实现点击文字直接复制到剪贴板

想做一个点击以后直接把文字复制到剪贴板的效果，试过document.execCommand和clipboardData，但是都没有实现，要么是只适用于ie浏览器，要么是只能用在input上。

我水平不够，希望能早点做出效果，就没研究api直接照着网上的代码改了一下就用了。

参考的是这个：

改动以后的代码 clipboard.js实现文本复制

document.querySelector("#one").onclick = copy("#one");
document.querySelector("#two").onclick = copy("#two");
document.querySelector("#three").onclick = copy("#three");
document.querySelector("#four").onclick = copy("#four");
document.querySelector("#five").onclick = copy("#five");
document.querySelector("#six").onclick = copy("#six");
document.querySelector("#seven").onclick = copy("#seven");
document.querySelector("#eight").onclick = copy("#eight");
document.querySelector("#nine").onclick = copy("#nine");
function copy(name) {
  //通过function复制
  var clipboard = new Clipboard(name, {
    // 通过target选择需要被复制的对象
    target: function () {
      return document.querySelector(name); //复制标签文本
    },
  });

  clipboard.on("success", function (e) {
    //复制成功之后的回调
    console.log(e);
    //提示：这里是个坑,需要手动销毁当前的clipboard,否则会触发两次事件
    clipboard.destroy();
  });

  clipboard.on("error", function (e) {
    //执行失败后需要做的事...
    console.log(e);
    clipboard.destroy();
  });
}