>該教程指導(dǎo)您創(chuàng)建一個Chrome擴(kuò)展名，該擴(kuò)展為Google文檔添加了持久的單詞計數(shù)。 它通過在狀態(tài)欄中提供不斷更新的單詞計數(shù)來增強Google Docs用戶體驗。 >

密鑰功能：

• >持續(xù)的單詞計數(shù)：一個狀態(tài)欄實時顯示單詞計數(shù)。
• 綜合計數(shù)：準(zhǔn)確地計數(shù)主要文本，標(biāo)題，頁腳和腳註中的單詞。
字符計數(shù)：
• 還提供了一個字符計數(shù)，可用於字符限制的內(nèi)容。 > >>易於安裝：按照分步說明進(jìn)行構(gòu)建和安裝擴(kuò)展名。 >
• 這個項目需要HTML，CSS和jQuery知識。 確保您在開發(fā)人員模式下具有最新的Chrome瀏覽器（可通過訪問）。 >

步驟1：創(chuàng)建清單文件（subest.json）

Tools > Extensions>

此文件告訴Chrome您的擴(kuò)展名。創(chuàng)建一個名為

的文件，其中包含以下內(nèi)容：> >

步驟2：背景腳本（background.js）

manifest.json> 使用此代碼

創(chuàng)建

{
    "name": "GDWC",
    "version": "0.1",
    "description": "Word count statusbar for Google Docs!",
    "background" : { "scripts": ["background.js"] },
    "page_action" : {
        "default_icon" : "icon.png",
        "default_title" : "GDWC statusbar is active"
    },
    "content_scripts": [
    {
        "matches": ["https://docs.google.com/document/*"],
        "js": ["jq.js", "main.js"],
        "run_at": "document_idle"
    }
    ],
    "icons": {
        "48": "icon48.png",
        "128": "icon128.png"
    }
}

：

此腳本在地址欄中顯示了擴(kuò)展名的圖標(biāo)。

>

background.js步驟3：狀態(tài)欄html（statusbar.html）

chrome.extension.onRequest.addListener(
    function(request, sender, sendResponse) {
        chrome.pageAction.show(sender.tab.id);
        sendResponse({});
    }
);

>

創(chuàng)建

：

這會創(chuàng)建視覺狀態(tài)欄。 切記包括原始輸入中的CSS。

>

statusbar.html步驟4：主javascript（main.js）

<div id="GDWC_statusBar">
  <a href="http://www.miracleart.cn/link/1c09cec8e3fb5f6dd4fd22a5c644d3e5">GDWC</a>
  <span class="GDWC_statusBarSeparator"></span>
  <span id="GDWC_wordsTotal">Warming up...</span>
</div>
<style>
/* CSS styles for the status bar */
/* ... (same CSS as in original input) ... */
</style>

>

創(chuàng)建

：

此腳本注入狀態(tài)欄HTML並實現(xiàn)單詞計數(shù)邏輯。 您需要在您的項目中包括

（jQuery的縮小版本）。

> main.js>

>步驟5：安裝

$.get(chrome.extension.getURL("statusbar.html"), {}, function(data) {$('body').append(data);}, 'html');
chrome.extension.sendRequest({}, function(response) {});

$(document).ready(function(){
    countWords();
});

function countWords() {
    var number = 0;
    $('span.kix-lineview-text-block').each(function(i, obj){
        number += $(obj).text().split(/s+/).length;
    });
    $('#GDWC_wordsTotal').text(number + ' total words');
    timeout = setTimeout('countWords()', 5000);
}

jq.js

創(chuàng)建必要的圖標(biāo)（

，，）。

>

>將所有文件放在文件夾中（例如，“ gdwc”）。
1. 在Chrome中，轉(zhuǎn)到icon.png，啟用開發(fā)人員模式，然後單擊“加載打開包裝”。 icon48.png icon128.png選擇“ gdwc”文件夾。
現(xiàn)在，打開一個Google文檔，您的單詞計數(shù)擴(kuò)展應(yīng)該是活動的！ 請記住，這是一個基本版本； 原始文章中討論了優(yōu)化。 原始文章還提供了下載必要的jQuery文件和示例圖標(biāo)的鏈接。
3. >

以上是構(gòu)建您自己的Chrome擴(kuò)展名：Google Docs Word Count工具的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！