冗长而乏味的介绍，并声称拥有百万富翁
我一如既往地发现，在这个世界上有些事情不太适合我。 也就是说，通过在台式计算机上的搜索引擎中输入某种长查询，然后切换到平板电脑，我无法逐字检索查询文本以获取完全相同的结果。 一切开始得如此顺利。 我在搜索引擎中看到了指向我的问题的答案的链接，并意识到它保证了长期阅读的重要性。 然后我关闭计算机，将平板电脑放到沙发上，以为现在我将其重新输入到搜索引擎中，现在我将在平板电脑上打开该链接，然后以一种更舒适的姿势平躺着，我会阅读...但不在这里是。 文字中有一些细微的差异-我的链接不再在搜索引擎中。 播放链接本身也不是一种选择：太长了。 对于查询文本的选项感到困惑，我几乎对打破平板电脑感到愤怒。 该死的，我必须起床，再次打开计算机，启动浏览器并浏览历史记录，以查找我的请求的确切文本。
在Chrome和Firefox中安装了扩展程序主意
我以为是，但为浏览器编写这样的扩展程序会很不错，该扩展程序将使您可以通过服务器将任何打开的选项卡转移到任何其他计算机，并在那里继续使用它们。 是的，某些浏览器已经具有云功能-您只需要登录两个设备，然后...但这很重要。 但是，如果我的计算机上装有Chrome，平板电脑上装有Firefox，该怎么办？ 然后...只需登录，是的。 如果我仍然记得我在Google帐户中的密码。 而且我只是没有Firefox帐户。 我什至不知道那里是否有帐户？ 当然，您可以在其中注册第三方云服务，并可能以某种方式向您自己扔所需的链接。 但是仍然需要在此注册并牢记另一个密码...不，这是完全不现实的。 最后，您可以通过邮件给自己一个链接。 但是，所有这一切都需要花费很长时间，然后再从地址栏中复制粘贴，然后粘贴到地址栏中，例如，在平板电脑上这样做非常不便。 不，这都是胡说八道...
躺在沙发上，我慢慢意识到所有这些动作都需要太多的动作……不，伙计们，那是不会做的。 当我了解到这个世界上不适合我的东西时，我便坐下来编写代码，以自己的方式做所有事情。 我以为我在平板电脑和台式机上的社交网络上都获得了授权。 例如，在不同的浏览器中，也可以在同一台计算机上。 总的来说，对我来说解决方案很明显-通过社交网络对用户进行身份验证。
抒情离题
顺便说一句，当我写自己的东西时，我也会以自己的方式来做。 我使用高级笔记本中的纯JavaScript语言编写，不使用github，不使用第三方库，甚至不使用jquery。 因此，将没有关于如何编写浏览器扩展的教程。 我不会教你这个。 不要像我那样做。 我警告您-这是一个不好的例子。 我还想告诉所有潜在的批评家，期待他们的反应-是的，我完全同意你的义愤填.。 是的，您不能将整个脚本放入一个或两个文件中，但是您需要将所有内容（例如色拉）切成许多小块，以便可以在命令行中通过长而智能的命令将其收集3个小时。 是的，您不能在一个文件中组合javascript代码和html代码-最好将另一种抽象水平组合在一起。 是的，您不能使用表格布局，但是该死，它很铁！ 而且，更是如此-现在它们将使我筋疲力尽-您无法一口气使用innerHtml和创建复杂的html结构，但是您需要以循环方式附加和分离所有子级，然后仔细附加并删除每个处理程序...是的，我做错了所有事情。 有罪，我后悔。 但我有意识地这样做，因为它更容易。 谁会禁止我？ 最后，这不是非法的，对吗？ 我不知道如何按照现代mod的要求进行编程，甚至不想尝试，因为我认为开发流程图不必要地复杂。 我是用自己的双手来编写代码，而不是不写一行就从别人的代码中构造代码。 但是，我的代码是轻量级的，不需要由专门的团队来组装，并且可以快速工作。 我正在使用F5技术编写代码。 这是为了在开发过程中随时查看当前版本的工作方式的时候，只需单击F5浏览器。
但是，我仍然必须在循环中挂起处理程序，因为否则扩展将无法通过测试。 同样在扩展名中，以防万一，在html索引文件中-突然-禁止动态连接的脚本。 所以我通过script标签将它们连接起来。
标签存储
因此，我决定应将在浏览器中打开的选项卡保存在某些列表中，这些列表称为计算机-家用计算机，工作计算机，本地计算机。 本地-当列表未存储在服务器上而是存储在浏览器数据库中时，因此，只能在保存列表的浏览器中使用它。 这适用于不需要在不同计算机之间抛出的那些选项卡。 好了，其余列表可以在扩展支持的任何计算机和浏览器上查看。
对于每个选项卡，用户可以留下任意文本注释。 例如，如果通过标题和链接类型不清楚，我可以方便地记住观看该系列时停止了哪个系列，还可以为自己标记页面上的内容。
根据用于创建Chrome和Firefox扩展程序的文档，扩展程序代码应位于两个文件中-主文件和背景文件。 主脚本处理用户界面的显示，而后台脚本可以控制浏览器选项卡并与服务器交换数据。 在Chrome和Firefox中管理标签非常相似。 例如，用于在Chrome中打开或关闭标签页的事件处理程序如下所示：
chrome.tabs.onUpdated.addListener( function(tabId, changeInfo) { });
在Firefox中，如下所示：
browser.tabs.onUpdated.addListener( function(tabId, changeInfo, tabInfo) { });
对于所有浏览器，显示所有打开的选项卡的列表的功能都完全相同：
chrome.tabs.query({},function(data){ });
是的，是的，Chrome还在Firefox中写了chrome ...等 这有点奇怪，但是，浏览器正朝着使其api标准化的事实令人鼓舞。
实际上，扩展程序的所有功能都可以通过使用几种功能来实现-单击扩展程序窗口的图标，打开扩展程序窗口，阅读打开的选项卡，关闭选项卡，创建新选项卡，收听选项卡事件，并与扩展程序窗口交换数据。 仅此而已。 这些方法仅在后台脚本中可用。
阅读后，在浏览器中打开的选项卡将发送到我的服务器，并保存在常规SQL数据库中。 服务器脚本是用PHP编写的。 有一个用户表，用于存储指向另一个表（数据表）中行的链接。 此数据是页面的地址，其名称和用户的文本注释，以文本字符串的格式存储在大约一千字节长的文本类型字段中。 数据以未加密形式存储。 每兆字节可以保存大约1,000个选项卡。 每个用户最多可提供25个此类存储（“计算机”）。
但是，该扩展程序的免费版本将用户限制为两个存储设备-家用计算机和工作计算机，并且每个存储设备最多可以存储10个标签。 我仍在研究付费版本和付款方式。 每台计算机最多将有25个“计算机”和大约1000个选项卡，以及每台计算机的背景图像，图标和名称的选择，层次结构列表等等。
还有另一个存储库-本地计算机。 这里没有限制，因为选项卡数据存储在用户计算机上的本地浏览器数据库中。 您可以在此处存储任意数量的选项卡，但不能超过硬盘驱动器允许的数量。 此外，由于数据不是存储在本地存储中，而是存储在indexedDB中，因此那里没有5或几兆字节的限制。 重要的是不要意外清除此存储库以及浏览器历史记录。 我还计划将选项卡导出和导入到文本文件。
为了使用indexedDB，我编写了一个只有106行长的小型子库。 与服务器上的数据库不同，这里不需要将所有数据提取为文本字符串，而是可以将其立即保存在关联数组中。 存储的原理是这样的：关键是价值。 该值可能是一个巨大的关联数组。
用户认证
火狐浏览器正如我已经提到的，授权通过社交网络进行，并且在服务器上使用OAuth协议进行。 Facebook和VKontakte仍然支持它，但是我计划增加用户身份验证方法的数量。 两个社交网络的文档中都详细描述了OAuth服务器授权方案，因此没有必要对其进行详细介绍。 我只注意到我不喜欢这样的事实，即即使用户已经登录到社交网络并且已经授予了扩展权限，在授权过程中也会打开一个新的浏览器选项卡。 此选项卡必须由背景扩展脚本捕获，然后被迫关闭，并且通常来说，它在外观上并不令人满意，楔入其他选项卡中并在其出现并销毁时闪烁。
要关闭它，对于VKontakte，您需要检查选项卡事件处理程序中地址的存在：
oauth.vk.com/blank.html
对于Facebook：
https://www.facebook.com/connect/blank.html
以防万一：
facebook.com/connect/login_success.html
因此，首先，我向Google Web Store发送了一个扩展程序集，该扩展程序集是在对客户端进行授权的同时，首先对相应的客户端javascript API社交网络进行了上拉。 此外，由于扩展程序已安装在用户上，并且我需要在服务器上进行授权，因此我也在i框架的扩展程序脚本中从服务器中提取了html，但已经在其中提取了社交网络api ...
与服务器的数据交换方案就是这样。 扩展索引页面将命令（例如单击信息）发送到后台扩展脚本。 使用postMessage的后台脚本将数据发送到i-frame html。 I-frame将数据发送到服务器上的php脚本。 服务器在i框架中响应，i框架在后台脚本中响应，后台脚本在索引中响应，用户看到答案。 ew ...而且最重要的是-一切正常！
通常，这没有用。 Google用很多措辞来包裹我的扩展程序，其中有些含糊之处是他们说您的扩展程序不符合我们的安全政策。 通过与支持的往来，我得以实现具体目标。 也就是说，他们不喜欢扩展名从第三方服务器提取html和js的事实。总的来说，我不得不以客户端授权结束并返回到服务器。 是的，将HTTP帖子请求从后台扩展脚本直接发送到您的服务器，但是事实证明是允许的。 好吧，好 那就更好了。 结果变得更短，并且不需要从社交网络中提取javascript api-这对于用户来说是一个额外的等待时间。
查看标签
返回扩展选项。 选项卡列表本身是一系列的行，其中首先出现图片图标，然后是页面标题，最后是链接。 裁切屏幕上指定的行大小不适合的内容。 但是数据库已完全保存。 同样，任何行都可以彩色瓷砖的形式在屏幕上移动。 首先，这是最重要的站点。
Chrome标签页列表瓷砖的颜色是根据站点的域名自动选择的。 该函数接受URL。 域名被分为三个大致相等的字符组，每组中的第一个字符被转换为颜色分量的值：R，G，B。 通过将除法的余数除以26，这三个字符的代码将范围从d1减少到0到25。甚至俄语字母的字符也将减少到该范围。 第27个字母成为第一个字母并不重要：我们不需要字母表中所有字母的颜色分量都一定是不同的，而是让它们重复。 然后，将从范围d1（0 ... 25）获得的三个数字按比例减少为范围d2（150 ... 255）。 通常，这些范围是在功能开始时设置的，可以更改为任何其他范围。 我花了150 ... 255，以便颜色分量明亮。 例如，如果设置为0 ... 100，则图块将变暗。 因此，域名中的三个字符将转换为150 ... 255范围内的3个数字。 然后，您可能已经猜到了，它们被解释为图块R，G和B的颜色分量。一切都很简单。
getSiteColor=function(url) { var d1=[0,25], d2=[150,255]; var code=0, codep=0, color=0, str='', domen='', ar=[], inc=0; ar=url.split('//'); if (ar.length>1) {str=ar[1];} else {str=ar[0];}; str=str.split('www.').join(''); domen=str.split('/')[0]; str=domen.split('.').join(''); ar=[]; inc=Math.floor(str.length/3); if (str.length % 3 >0) {inc++;}; for (var i=0; i<str.length; i+=inc) { code=str.slice(i, i+1).charCodeAt(0); codep=code % (d1[1]-d1[0]+1); color=Math.round( codep * (d2[1]-d2[0]) / (d1[1]-d1[0]) ) + d2[0]; ar.push(color); }; return {r:ar[0], g:ar[1], b:ar[2], domen:domen}; }
HTML文档结构
一个html文档由具有绝对位置的画布的几个元素组成，这些元素按叠加方式进行组合，并在一个div块中显示列表。 在浏览器窗口的调整大小上挂有一个函数，用于调整所有这些元素的大小，并将其调整为新的高度和宽度。 还有一个最小尺寸，会导致滚动条出现。 背景图像显示在底部画布上。 我决定为不同的列表（即计算机）设置不同的背景，以使用户更容易浏览。 背景图像以保留的比例填充到窗口中，并略微变亮，以免引起人们的注意-在其顶部绘制了一个白色的半透明矩形。 主菜单画布位于背景画布上方，仅填充屏幕顶部。 甚至更高的是div块，在其中形成选项卡列表本身。 画布菜单导航通过我的迷你图书馆完成。
Opera和Yandex浏览器本地化
在主屏幕上，有一个标记，通过单击它，界面会在俄语和英语之间切换。 在这里，页面被重定向到相同的地址，但是在命令行上带有参数。 在加载所有其他元素之前读取此参数。 然后根据其值，将带有俄语或英语短语的这个或那个js文件加载到短语关联数组lng_en.js或lng_ru.js中。 在应用程序本身中，为了显示界面短语，已经使用了从该关联数组到文本字符串的链接。 另外，根据地址栏中的值，将加载包含图形界面元素的文件-按钮：buttons_en.png或buttons_ru.png。 我认为最好在图形编辑器中同时用每种语言的图标和题词创建按钮，而不是在其中创建一个空按钮并在其上覆盖图标和题词，尤其是因为它们并不多，并且整个精灵列表仅重50 b 我计划继续进行设计，并使所有按钮的形式有所不同。
无论如何，将加载带有sprites main.png的常规文件，该文件包含不依赖于特定本地化的图形元素。
网络版
我认为，如果可以在电话途中查看从家庭或工作计算机中仔细存储的链接，那将是很好的。 但是，并非所有的移动操作系统浏览器都支持扩展。 因此，我创建了一个Web程序集。 通过访问特定地址的站点，您仍然可以使用社交网络之一登录并查看选项卡。
是的，无法将选项卡添加到列表或进行编辑。 但是，您至少可以从列表中打开选项卡并查看页面。 我认为值得在此网站的移动版本上工作并在其中显示更大的选项卡列表。
IE 11中的Web版本广告业
到目前为止，我还没有真正致力于促进自己的扩展。 他只是在社交网络中创建了群组，并邀请了他的所有朋友。 是的，他在Yandex Direct中发起了1500卢布的广告宣传。 她没有给出任何特别的结果，但也许我没有正确地宣布。 或问题可能出在我指示了指向扩展程序首页英文版的链接。 也许值得给我们一个链接，该链接不是指向主页，而是指向扩展商店之一。 如您所知，我不是行销天才。 通常，我将使用其他参数再试一次。 广告活动获得了39次点击。 很难说我是否因此获得了一些新用户。
Firefox下的版本有点奇怪。
10月17日的统计信息显示多达227次下载。 我不知道Yandex.Direct中的广告系列是否为此做出了贡献，但是由于某种原因，由于某种原因，每天又有1-2次下载。 同时，对于Firefox的扩展，还有日常用户的概念：
为什么尚有227次下载，但每天只有1-2个用户，目前尚不清楚。 也许这是某种失败。 总的来说，我还是不明白那是什么，这些人都在哪里...
Chrome Web Store扩展商店中的统计数据使某些永久性的加载时间表（这是我没有看到的）和每天5-10位用户感到满意。
另外，我将程序集发送到Opera扩展存储。 但是，我已经列出了两个版本，而没有等待它们中的任何一个，但有时我会在那传播一些新版本。 而且，的确，如果Opera完美地安装了来自Chrome商店的扩展程序，为什么需要这样做。
总结
我创建了三个扩展版本-Chrome，Firefox和网络版本。 实际上，所有三个程序集都是一个，并且是同一程序集，它们仅在配置中指示当前正在使用哪个浏览器引擎。 并且用于制表符的相应功能已初始化。 在打包为zip并将包发送到相应的扩展存储之前，我会更改此值。
Chrome和Firefox的版本已经过测试，并放置在各自的官方扩展商店中。 此外，向Google注册扩展开发人员的费用为5美元。 Mozilla免费提供。 扩展程序的Web版本位于服务器上。 Chrome商店中的程序集在兼容的浏览器中可以正常运行：它也可以安装在Yandex Browser和Opera中。 我计划发布具有更多高级功能的新版本。
通常，浏览器扩展是强大的。 现在，我不需要从沙发上站起来，也不需要为打破平板电脑而大发雷霆。 这是全禅。 对所有人都好。