介紹

相信前端的小伙伴對(duì)谷歌瀏覽器插件開(kāi)發(fā)并不陌生，或許你會(huì)想到，當(dāng)習(xí)得這個(gè)技能后最后又能做些什么呢？當(dāng)然又很多，本期就帶大家去實(shí)現(xiàn)一個(gè)插件，其具體作用就是，你可以在在網(wǎng)頁(yè)上選擇一段文本然后就會(huì)自動(dòng)復(fù)制下來(lái)，同時(shí)，還可以自動(dòng)完成語(yǔ)音朗讀，這樣你就可以不用看就可以了解到內(nèi)容，而且也不用每次按Ctrl+C去復(fù)制啦~

正文

基礎(chǔ)配置

眾所周知，開(kāi)發(fā)谷歌瀏覽器插件前先要去配置一下 manifest.json 文件，它是用于指定擴(kuò)展插件應(yīng)用名稱、描述、圖標(biāo)、應(yīng)用文件入口、權(quán)限等信息的。

{
    "name": "文本拷貝&語(yǔ)音朗讀插件",
    "description":"在頁(yè)面選中所需要復(fù)制、語(yǔ)音的文本，將會(huì)完成自動(dòng)復(fù)制，且會(huì)幫你語(yǔ)音說(shuō)出所選的內(nèi)容",
    "version": "0.1",
    "manifest_version": 3,
    "background": {
        "service_worker": "background.js"
    },
    "action": {
        "default_icon": {
            "16": "/assets/favicon-16x16.png",
            "48": "/assets/favicon-48x48.png"
        }
    },
    "icons": {
        "16": "/assets/favicon-16x16.png",
        "48": "/assets/favicon-48x48.png"
    },
    "permissions": [
        "tts",
        "clipboardRead",
        "clipboardWrite"
    ],
    "content_scripts":[{
        "js":["page.js"],
        "matches":["http://*/*","https://*/*"]
    }]
}

這里我們簡(jiǎn)單說(shuō)明一下以上配置都做了什么吧：首先我們起好擴(kuò)展應(yīng)用的名字和描述。然后定義了版本好，因?yàn)槟壳盀榧冏詩(shī)首詷?lè)式的demo，所以給一個(gè)v0.1版本吧。

mainfest版本設(shè)置為3，所以后面的 action 插件頁(yè)面展示和 icons 插件圖標(biāo)要分開(kāi)寫(xiě)在下面，如果mainfest設(shè)置為2的話，則需要寫(xiě) browser_action 來(lái)代替 action ，同時(shí)，要把 icons 并入其中。mainfest版本2與3細(xì)碎的差異其實(shí)還是比較多的，具體可以查看官方的文檔來(lái)再來(lái)嘗試。

另外，指定background的腳本，因?yàn)樗?Chrome 插件比較重要的一個(gè)部分，也是Chrome 插件生命周期最長(zhǎng)的一個(gè)組件。background 的生命周期在 Chrome 啟動(dòng)后，啟用的插件會(huì)被啟動(dòng)，background.js 就會(huì)被執(zhí)行。我們后面寫(xiě)的功能調(diào)用都會(huì)經(jīng)過(guò)它之手來(lái)發(fā)出。

而 content_scripts 顧名思義其目的就是要寫(xiě)入頁(yè)面將要執(zhí)行那個(gè)腳本文件。在這里我們就給它寫(xiě)一個(gè) page.js 后面我們的業(yè)務(wù)層面都將從頭入手。

當(dāng)然，最關(guān)鍵的是我們要在 permissions 開(kāi)啟拷貝和語(yǔ)音朗讀的權(quán)限，然后我們才可以順暢的使用Chrome 提供的API來(lái)完成這些功能。其中 tts 表示語(yǔ)音朗讀的權(quán)限，而后面那倆則是拷貝的讀寫(xiě)權(quán)限。

好了準(zhǔn)備工作都完成了，接下來(lái)就開(kāi)始搞事情~

獲取內(nèi)容

剛才說(shuō)道我們的目的是選中網(wǎng)頁(yè)中的文本內(nèi)容來(lái)完成再做拷貝和朗讀任務(wù)的，那有什么辦法能快速獲取到這些內(nèi)容呢？當(dāng)然有辦法，就是用 window.getSelection 方法來(lái)返回一個(gè) Selection 對(duì)象，再對(duì)這個(gè) Selection 里就是你所選中的文本信息了，可以直接使用 toString 方法來(lái)讀到。

// page.js
document.addEventListener("mouseup", e => {
    // 獲取內(nèi)容
    const txt = window.getSelection().toString()
    if(txt == "") return;
    // 拷貝文本
    document.execCommand('copy')
})

語(yǔ)音朗讀

語(yǔ)音朗讀我們就要借助 background.js 來(lái)完成，所以，我們?cè)?chrome.runtime 先發(fā)出一個(gè)消息出去。

// page.js
document.addEventListener("mouseup", e => {
    // ...
    // 發(fā)送語(yǔ)音朗讀消息
    chrome.runtime.sendMessage({
        type: "word",
        value: txt,
    }, res => {
        console.log(res)
    })
})

然后在 background.js 中接收到這個(gè)消息，在回調(diào)函數(shù)里就可以用 tts.speak 方法讀出我們所選中的內(nèi)容了，非常的簡(jiǎn)單。

// background.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    chrome.tts.speak(request.value)
    sendResponse({
        ...request,
        msg: "success",
    })
    console.log(chrome.tts)
})

結(jié)語(yǔ)

最后你可把剛才的文件夾導(dǎo)入到擴(kuò)展程序里，一個(gè)屬于你自己的小工具就完成了，當(dāng)然本篇也是用一個(gè)小案例來(lái)拋磚引玉，希望你可以聯(lián)想到更多的業(yè)務(wù)需求來(lái)做一款真正好用的瀏覽器插件，還有更多未知好玩的API等你去發(fā)現(xiàn)和使用。

以上就是JS實(shí)現(xiàn)谷歌瀏覽器插件拷貝語(yǔ)音功能詳解的詳細(xì)內(nèi)容，更多關(guān)于JS谷歌瀏覽器插件拷貝語(yǔ)音的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論