构建您自己的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中文网其他相关文章！