chrome扩展crx构建_构建自己的Chrome扩展程序：Google文档字数统计工具，第1部分...

最新推荐文章于 2022-12-09 11:42:06 发布

dingshi7798

最新推荐文章于 2022-12-09 11:42:06 发布

阅读量131

点赞数

文章标签： java python js html javascript ViewUI

原文链接：https://www.sitepoint.com/build-your-own-chrome-extension-a-google-documents-word-count-tool/

版权

chrome扩展crx构建

如今，像很多人一样，我放弃了桌面文字处理程序，转而使用免费，简单的Google文档。但是，我想念的一件事是状态栏的字数持续不变，这有助于我关注正在撰写的文章中的字数限制。为了增强我的Google Docs体验，我决定构建一个像它一样的东西，方法如下。

欢迎阅读有关为Chrome浏览器构建和优化扩展的三部分系列之一。建议理解HTML，CSS和jQuery的知识以理解本教程。另外，请确保在开发人员模式下具有最新版本的Google Chrome（在工具->扩展程序下；屏幕顶部的复选框）。

在硬盘驱动器上的任何位置创建一个文件夹，并为其命名-例如GDWC。每个扩展程序的第一步都是构建其清单文件：一个引导程序，该程序会告诉Chrome扩展程序是什么类型，扩展程序在什么上下文中运行，需要什么，执行什么以及何时执行。创建一个名为manifest.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"
	}
}

前几个值，例如name ， version和description是不言自明的。然后，有一个背景，指示在后台加载哪个脚本。后台页面和脚本有特殊用途（其解释不适合本文的范围），但是我们的扩展程序仅需要激活地址栏中的图标即可。在进行此操作时，创建一个background.js文件并将其内容放入其中：

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

所有这一切都告诉扩展程序：“调用时显示图标”，仅此而已。

让我们继续查看manifest.json。 page_action块的存在告诉Chrome，此扩展名适用于特定页面（或某些页面），而不是整个浏览器。作为页面动作的扩展名可以在浏览器的地址栏中带有一个图标（default_icon值）。相反，浏览器操作会在地址栏右边的外部添加图标。扩展名可以是一个，也可以不是另一个。由于我们已经涉及到图标，因此，我们现在添加一些内容，并将其（以及最后一个清单块，图标）移开。我做了几个样本。他们的下载链接位于本文的结尾。两个较大的图标（icon48和icon128）用于Chrome网上应用店，因此当其他人在其中查看扩展程序时，其扩展程序看起来既漂亮又漂亮。

现在让我们看一下content_scripts块。

matchs用于激活某些网页上的扩展名。在我们的案例中，目标是在打开Google文档中的文档时将其激活，因此网址为https://docs.google.com/document/*
js告诉扩展程序，当“ matches”部分被触发时要运行哪个脚本。在我们的例子中，我们需要jq.js（这是jQuery的简化版）和我们的main.js脚本，其中包含计数逻辑。
run_at告诉它何时加载这些脚本-在我们的情况下是页面加载且文档变为空闲状态。

现在，我们的引导完成了，我们应该构建我们打算添加HTML。创建一个statusbar.html文件，并粘贴以下内容：

<html> 
<body> 
<style type="text/css"> 
div#GDWC_statusBar { 
  width: 100%; 
  height: 18px; 
  background-color: #ebebeb; 
  border-top: 1px solid silver; 
  color: black; 
  position: fixed; 
  bottom: 0; 
  z-index: 25000; 
  text-align: right; 
} 

span.GDWC_statusBarCounter { 
  padding: 0 10px 0 10px; 
  line-height: 18px; 
  font-family: verdana; 
  font-size: 10pt; 
} 

span.GDWC_statusBarCounter a { 
  text-decoration: none; 
  color: black; 
} 

span.GDWC_statusBarSeparator { 
  border-left: 1px solid silver; 
  border-right: 1px solid silver; 
  margin: 0 1px; 
  display: inline-block; 
  width: 1px; 
  height: 10px; 
} 
</style> 
<div id='GDWC_statusBar'> 
<span class='GDWC_statusBarCounter'>
<a href='http://about.me/bruno.skvorc'>GDWC</a>
</span> 
<span class='GDWC_statusBarSeparator'>
</span> 
<span class='GDWC_statusBarCounter' id='GDWC_wordsTotal'>Warming up...</span> 
</div> 
</body> 
</html>

如您所见，如果您只是在浏览器中打开文件，则只不过是屏幕底部的灰色栏，带有指向sitepoint.com的GDWC链接和文本“ Warming up…”。这段文字将通过JavaScript替换为字数统计，这是我们的下一个文件main.js进入的地方。

首先，将jq.js文件下载到扩展文件夹中（同样，此下载的链接显示在文章的结尾），或直接转到jquery.com并重新获得一个。接下来，创建文件main.js并粘贴以下内容：

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

您可能会认识到这是对本地文件的Ajax调用。此行告诉扩展名，以获取statusbar.html文件的内容并将其注入到文档中结尾body标记之前。由于.html文件中CSS指示状态栏在页面上的位置（固定，固定在所有内容和底部），因此从视觉上基本上可以完成状态栏的实现。您可以立即尝试一下，方法是转到工具->扩展程序，然后选择“加载未打包的扩展程序”，以查看外观。选择GDWC文件夹，单击“确定”，并刷新一个新的Google文档以查看其运行情况。

现在添加更多代码。将以下内容附加到main.js：

chrome.extension.sendRequest({}, function(response) {});

此行调用background.js脚本，并告诉它显示图标。继续并单击“工具”->“扩展”中已加载扩展下的“重新加载”，然后刷新要对其进行测试的选项卡。该图标应出现在地址栏中。

现在我们需要实际计算单词，因此添加以下代码：

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

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

如您所见，我们已经告诉文档，一旦DOM准备就绪，就可以运行countWords函数。我本可以使用按键事件来计算文档内容每次更改时的字数，但是Google劫持了所有默认事件（带有event.preventDefault），这是无法轻易规避的行为。因此，我选择了超时，告诉countWords（）基本每5秒重新运行一次（请参阅countWords（）函数的最后一行）。

然后，我们初始化一个局部变量号并遍历kix-lineview-text-block跨度。如果检查Google Docs网站的元素，您会注意到这些范围是文档中的实际行-每个范围都具有文档的宽度，每个新行都包含在另一个kix-lineview-text-block范围内。我们将每个跨度中的单词数（使用正则表达式拆分对单词进行计数）添加到总数中。您可能想知道为什么我们不仅仅抓取整个文档的文本并将其拆分。好吧，由于文本的每一行都是新的跨度，因此获取整个文档的总text（）可以将这些行连接起来。因此，如果一行以“ word”结尾，而下一行以“ count”开头，则您实际上将获得“ wordcount”，该单词计数作为一个单词，从而使正确的单词总数与整个文档中的行数相抵消。

最后，我们用实际的字数代替“热身……”消息。

如果您现在重新加载扩展程序，您会发现您已经构建了功能齐全的Chrome扩展程序。要将其分发给其他人，只需压缩文件夹并将其发送。要将其放置在Chrome网上应用店中（请不要这样做），请查阅官方指南以完成修饰。

结论

如您所见，为Chrome创建扩展程序非常简单。我们在这里构建的文件既不值得量产（循环计数会减慢非常大文件的工作量），也未进行优化（这一切都可以在没有jQuery的情况下完成，一定程度上减少文件大小，并且计数应逐页完成）页，仅从当前关注的页面开始重新计算），但这是对构成扩展标记的组件的可靠介绍。在本系列的下一部分中，我们将研究一些必要的优化并添加更多功能。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

完整的源代码和相关图像可以从github下载。

翻译自: https://www.sitepoint.com/build-your-own-chrome-extension-a-google-documents-word-count-tool/

chrome扩展crx构建

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
chrome扩展crx构建_构建自己的Chrome扩展程序：Google文档字数统计工具，第1部分...

chrome扩展crx构建如今，像很多人一样，我放弃了桌面文字处理程序，转而使用免费，简单的Google文档。但是，我想念的一件事是状态栏的字数持续不变，这有助于我关注正在撰写的文章中的字数限制。为了增强我的Google Docs体验，我决定构建一个像它一样的东西，方法如下。欢迎阅读有关为Chrome浏览器构建和优化扩展的三部分系列之一。建议理解HTML，CSS和jQuery的知识以...
复制链接

扫一扫