瀏覽器插件：花體英文轉換

最近在學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();
  });
}