独自のクロム拡張機能を構築する：Googleドキュメントワードカウントツール

このチュートリアルは、Googleドキュメントに永続的な単語数を追加するChrome拡張機能を作成することをガイドします。 ステータスバーで絶えず更新されたワードカウントを提供することにより、Google Docsユーザーエクスペリエンスを強化します。

主要な機能：

永続的なワードカウント：
• ステータスバーは、単語数をリアルタイムで表示します。 包括的なカウント：
メインテキスト、ヘッダー、フッター、脚注の単語を正確にカウントします。
• 文字count：文字カウントも提供し、文字制限コンテンツに役立ちます。
• 簡単なインストール：ステップバイステップの手順に従って、拡張機能を構築およびインストールします。 このプロジェクトには、HTML、CSS、およびjQueryの知識が必要です。 開発者モードで最新のChromeブラウザを持っていることを確認してください（
からアクセス可能）。
• ステップ1：マニフェストファイル（manifest.json）
を作成します

このファイルは、拡張機能についてChromeに伝えます。次のコンテンツを使用して

という名前のファイルを作成します Tools > Extensions

ステップ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>

ステップ3：ステータスバーHTML（statusbar.html）

create

：background.js

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

これにより、視覚的なステータスバーが作成されます。 元の入力からCSSを含めることを忘れないでください

ステップ4：メインJavaScript（main.js）

create

：

statusbar.html このスクリプトは、ステータスバーHTMLを挿入し、単語のカウントロジックを実装します。 あなたはあなたのプロジェクトに

（jqueryの邪魔されたバージョン）を含める必要があります。

<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>

ステップ5：インストール

必要なアイコンを作成します（

、main.js、

）。

<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>

すべてのファイルをフォルダーに配置します（例： "gdwc"）。

chromeで、jq.jsに移動し、開発者モードを有効にし、[ロード]を[ロード]をロードします」。

「GDWC」フォルダーを選択します。

さあ、Googleドキュメントを開くと、単語数の拡張機能がアクティブになります！ これは基本バージョンであることを忘れないでください。 最適化については、元の記事で説明します。 元の記事では、必要なjQueryファイルとサンプルアイコンをダウンロードするためのリンクも提供しています。

以上が独自のクロム拡張機能を構築する：Googleドキュメントワードカウントツールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。