構建您自己的Chrome擴展名：Google Docs Word Count工具

>該教程指導您創建一個Chrome擴展名，該擴展為Google文檔添加了持久的單詞計數。 它通過在狀態欄中提供不斷更新的單詞計數來增強Google Docs用戶體驗。 >

密鑰功能：

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

步驟1：創建清單文件（subest.json）

Tools > Extensions>

此文件告訴Chrome您的擴展名。創建一個名為

的文件，其中包含以下內容：> >

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

manifest.json> 使用此代碼

創建

<code class="language-json">{
    "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"
    }
}</code>

：

此腳本在地址欄中顯示了擴展名的圖標。

>

background.js步驟3：狀態欄html（statusbar.html）

<code class="language-javascript">chrome.extension.onRequest.addListener(
    function(request, sender, sendResponse) {
        chrome.pageAction.show(sender.tab.id);
        sendResponse({});
    }
);</code>

>

創建

：

這會創建視覺狀態欄。 切記包括原始輸入中的CSS。

>

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

<code class="language-html"><div id="GDWC_statusBar">
  <a href="https://www.php.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></code>

>

創建

：

此腳本注入狀態欄HTML並實現單詞計數邏輯。 您需要在您的項目中包括

（jQuery的縮小版本）。

> main.js>

>步驟5：安裝

<code class="language-javascript">$.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);
}</code>

jq.js

創建必要的圖標（

，，）。

>

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

以上是構建您自己的Chrome擴展名：Google Docs Word Count工具的詳細內容。更多資訊請關注PHP中文網其他相關文章！