介紹

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

正文

基礎(chǔ)配置

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

{
    "name": "文本拷貝&語音朗讀插件",
    "description":"在頁面選中所需要復(fù)制、語音的文本，將會完成自動復(fù)制，且會幫你語音說出所選的內(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://*/*"]
    }]
}

這里我們簡單說明一下以上配置都做了什么吧：首先我們起好擴展應(yīng)用的名字和描述。然后定義了版本好，因為目前為純自娛自樂式的demo，所以給一個v0.1版本吧。

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

另外，指定background的腳本，因為它是 Chrome 插件比較重要的一個部分，也是Chrome 插件生命周期最長的一個組件。background 的生命周期在 Chrome 啟動后，啟用的插件會被啟動，background.js 就會被執(zhí)行。我們后面寫的功能調(diào)用都會經(jīng)過它之手來發(fā)出。

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

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

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

獲取內(nèi)容

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

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

語音朗讀

語音朗讀我們就要借助 background.js 來完成，所以，我們在 chrome.runtime 先發(fā)出一個消息出去。

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

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

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

結(jié)語

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

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

最新評論