程序员 · 第2集 · 浏览器扩展怎么做

中俄字幕

1. Accessibility.

   可访问性。

2. Это такое красивое название.

   这个名字真美。

3. Да, кстати, классно, что вы все пришли, так много людей.

   对了，很高兴大家都能来，来了这么多人。

4. Браузерные экстеншены— это очень хайповая тема.

   浏览器扩展是个非常热门的话题。

5. Программный комитет сказал, что должен быть слайд обо мне.

   程序委员会说必须有一张关于我的幻灯片。

6. Вот я его добавил.

   我这就加上了。

7. В 2012 году я пошел на курсы программирования в компанию, которая больше не

   2012年，我参加了某家公司的编程培训课程，但这家公司现已不复存在。

8. существует. Там на Java.

   当时学的是Java。

9. Потом работал с Python, с

   之后我用Python工作，还用过

10. Salesforce, сейчас на бэкенде с Go и на фронтенде с HTML, CSS, JavaScript.

    Salesforce，现在后端用Go，前端用HTML、CSS和JavaScript。

11. Вот, вкратце так.

    大致就是这样。

12. Вот над этим проектом Intelligent Speaker— это мой браузерный extension для

    这是智能语音助手项目——一个我开发的浏览器扩展，用于

13. браузера, над которым я

    浏览器，我一直在做这个项目，

14. работал два года, ну и продолжаю.

    已经做了两年，现在仍在继续。

15. Мейнтейнить, поддерживать, и вот в этом проекте я и набрался опыта

    维护、支持它；也正是在这个项目中，我积累了今天要讲的

16. браузерных экстеншенов, о котором сегодня буду

    浏览器扩展开发经验。

17. рассказывать. А вот забыл спросить, а поднимите руки те, у кого ни один экстеншн не

    哦，我忘了问：请主浏览器上没安装任何扩展的人举手。

18. установлен на браузер основной.

    也就是说，大家主浏览器上至少都装了一个扩展。

19. то есть у всех значит хотя бы один установлен, все рекламу блокирует, например, да.

    比如，大家都装了广告屏蔽类扩展，对吧？

20. А еще мне интересно, поднимите руку, кто разрабатывал браузерное расширение?

    另外我还很好奇：有谁开发过浏览器扩展？请举手。

21. Может быть, даже давно когда- то.

    也许，甚至很久以前。

22. Человек 15 подняло.

    有15个人举手了。

23. Окей, интересно.

    好吧，挺有意思。

24. Ну немного контекста, что вообще мой extension делал, чтобы.

    稍微补充一点背景：我的扩展程序到底做了什么。

25. Может вам тоже интересно, когда вы видите страницу и тоже, кстати, проаксабились, у

    也许你们也会感兴趣——当你们看到网页时，同样地，顺便说一句，也感到眼花缭乱，

26. вас глаза болят читать, или вам нужно посудумать, вы можете нажать кнопочку и

    眼睛酸痛难以阅读，或者需要思考一下时，可以点击按钮，

27. компьютер почти человеческим голосом будет эту статью для вас озвучивать.

    电脑会用接近人类的声音为你朗读这篇文章。

28. И не тексту спич, который в Windows, например, встроенный или в Маке, который

    这不是Windows系统内置的、或Mac系统中那种文本转语音功能，

29. плохого низкого качества, а

    那种质量差、音质低的语音，而是

30. через Amazon, через их сервис, который называется, как он называется, Алекса что ли?

    通过亚马逊的语音服务，也就是那个叫‘Alexa’的服务？

31. Ой, ну в Алексе тот же голос в этой колонке, а голос называется Полли.

    哎呀，Alexa 的声音和这个扬声器一样，名字叫 Polly。

32. И через Azure Cloud тоже этот интеллиджент спикер может читать для вас статьи.

    通过 Azure 云，这位智能语音助手也能为您朗读文章。

33. Это экран с обычным devtools, этот слайд говорит о том, что чтобы разрабатывать

    这是带有常规 DevTools 的屏幕，这张幻灯片说明：要开发扩展程序，

34. экстеншены, не нужен дополнительный софт, не нужно из npm ничего ставить, в блокноте

    无需额外安装软件，也不需要从 npm 安装任何东西，在记事本中

35. можно написать кодик.

    就能编写代码。

36. И вы локально у себя можете уже этот экстеншн использовать, а если вы хотите послать

    您可以在本地直接使用该扩展程序；如果您想把它发送给朋友、发布到应用商店，甚至将其发展为一项业务，

37. другу или опубликовать в сторе, сделать из этого бизнес, то можно zip архив обычный

    就可以使用普通的 ZIP 压缩包。

38. использовать. То есть суть вообще этой презентации в одной фразе, что браузерный

    因此，本次演示的核心要点用一句话概括就是：浏览器扩展程序非常简单，

39. экстеншн это просто, это обычный HTML, CSS, JavaScript плюс API браузера.

    它只是普通的 HTML、CSS、JavaScript，再加上浏览器 API。

40. Мы живем в золотое время наконец- то, когда можно для Firefox и для Chromium

    我们终于迎来了黄金时代——现在可以同时为 Firefox 和 Chromium 开发扩展程序。

41. браузеров писать один и тот же код, но для Safari пока нет.

    所有浏览器都使用相同的代码，但目前 Safari 尚不支持。

42. Но возможно для Safari можно переиспользовать, я точно не знаю.

    不过 Safari 可能可以复用，但我不能确定。

43. И если вы захотите публиковать в Safari в Stories, вам нужно будет Apple платить 100

    如果您想在 Safari 的 Stories 中发布，您需要向苹果公司支付 100 美元。

44. долларов в год.

    每年 100 美元。

45. Ой, это вообще не про тот слайд.

    哎呀，这根本不是讲那个幻灯片的内容。

46. Это слайд про то, что Safari не поддерживает WebExtensions API.

    这张幻灯片讲的是 Safari 不支持 WebExtensions API。

47. Да, то что там кому сколько надо платить, это будет дальше, если вы хотите

    是的，关于谁该付多少钱的部分，后面再讲——如果您打算发布的话。

48. публиковать. Манифест JSON— это обязательный файлик, который должен лежать в

    manifest.json 是一个必需文件，必须放在扩展程序的文件夹或压缩包中。

49. папочке или в архивчике для экстеншена.

    它包含一些必填字段和可选字段。

50. у него есть обязательные поля, необязательные.

    它包含一些必填字段和可选字段。

51. Ну, здесь вы видите манифест вершин два, скоро будет вершин три.

    嗯，这里您看到的是顶点二版清单，很快将推出顶点三版。

52. Локальное название, туды сюд.

    本地化名称，随便填。

53. Желтеньким выделен appdesc.

    黄色高亮显示的是 appdesc。

54. Это значит, что вот такой формат

    这意味着这种格式

55. позволяет вам использовать локализационные файлы, если вам нужна поддержка

    允许您使用本地化文件（如果需要支持多语言）。

56. локализации. С коробки это работает.

    开箱即用。

57. И вы в этих локализационных файлах пишете, например, вот какие- то такие простой

    在这些本地化文件中，您可以编写如下简单格式的内容：

58. формат. Вот это произвольные ключи,

    这些是任意键名，

59. опциональный description, тут можно что угодно писать, но это удобно для

    description 是可选的，此处可填写任意内容，但对本地化人员更友好。

60. локализаторов.

    对本地化人员来说很方便。

61. Пожалуйста, не больше десяти букв, чтобы в эту кнопку влезло.

    请不要超过十个字母，以便按钮能容纳得下。

62. ну и месседжи на разных языках.

    还有不同语言的消息。

63. И вот у нас компания даже

    于是我们公司甚至……

64. научил девушку, которая занималась локализацией, она впервые в жизни увидела JSON, и

    教会了一位负责本地化的女士，她生平第一次见到JSON，而且……

65. она в GitLab'e нажимала кнопку Edit и редактировала JSON'ы.

    她在GitLab中点击Edit按钮来编辑JSON文件。

66. если вам вообще нужна локализация.

    如果你们确实需要本地化功能的话。

67. Также снова манифест,

    同样，再次提到清单文件（manifest）……

68. контент security policy можно указать.

    可以指定内容安全策略（Content Security Policy）。

69. и минимальная версия браузера, если у пользователя браузер стареет, то кнопка в

    以及最低浏览器版本；如果用户浏览器版本过旧，安装历史中的按钮将被禁用。

70. истории установки будет заблокирована.

    安装历史中的按钮将被禁用。

71. Это архитектурный слайд.

    这是架构示意图。

72. Браузерный extension может состоять из трех пространств.

    浏览器扩展可能由三个部分组成。

73. контент скрипт то что мы инжектнули в страницу html ой javascript

    内容脚本是我们注入到HTML页面中的JavaScript代码。

74. и css который мы инжектим в страницу это не обязательно

    以及我们注入到页面中的CSS（这并非必需）。

75. ваш экстеншн может например раз в минуту аудиофайл производить вообще без ui без

    例如，您的扩展可以每分钟生成一个音频文件，完全无需用户界面，也无需注入。

76. инжекта. Есть попап, UI такой термин, попап страница попап UI— это когда вот вы

    存在弹出窗口（UI）这一术语：弹出窗口UI是指当您点击地址栏右侧的这个按钮时，

77. справа нажимаете от адресной

    在地址栏右侧点击，

78. строки вот эту кнопочку, там

    点击这个按钮，

79. если вам нужен UI, если есть UI, там появляется какой- то UI с ограниченной шириной,

    如果需要用户界面，或者存在用户界面，就会显示一个宽度受限的UI，

80. с ограниченной высотой.

    高度也受限。

81. Это называется попап UI, это отдельная страница.

    这称为弹出式UI，是一个独立的页面。

82. Если вы видите этот UI, он в памяти есть, если вы его не видите, его в памяти нет, и

    如果你看到这个UI，它就存在于内存中；如果你看不到，它就不在内存中，

83. при открытии его нужно переинициализировать, если вы вообще это делаете.

    因此打开时需要重新初始化（如果你确实执行此操作的话）。

84. И бэкграунд страница, которая может работать все время, а может быть так называемая

    而背景页面可以一直运行，也可能是一种所谓的

85. event страница, когда она поднимается и реагирует на event.

    事件页面，即仅在触发事件时被唤醒并响应事件。

86. вот есть такой интересный документ что google планирует ну

    这里有一份有趣的文档，说明谷歌计划——嗯——

87. не только google это формат для всех mozilla тоже об этом пишет с манифеста версии

    不仅谷歌采用这一格式，Mozilla也在其清单文件（manifest）版本说明中提及，

88. два перейти на манифест версии три

    从清单文件版本二升级到版本三。

89. это значит апгрейт api

    这意味着API将升级，

90. и правила игры немного меняются.

    游戏规则也会略有变化。

91. Тут я выделил там много всего интересного, но самое интересное то, что эти стрейнцы,

    这里我标出了很多有趣的内容，但最有趣的是这些Strayncies，

92. попап стрейнцы, бэкграунд стрейнцы сейчас.

    弹出式Strayncies、背景Strayncies，目前如此。

93. вещь в себе отдельная технологическая штука, но они планируют логично, чтобы это

    本身是一种独立的技术事物，但他们计划合理地将其

94. были сервисворкеры, чтобы.

    变为Service Workers。

95. API, которая в браузере, и API, которая для экстеншнов,

    浏览器中的API，以及扩展程序的API，

96. если это одна и та же функциональность, то чтобы это было одно и то же API, что

    如果功能相同，那么应使用同一套API，

97. логично, чтобы не нужно было впустую учить что- то

    这样就无需费力学习无用的东西。

98. ненужное. Вот теперь немножко кода.

    现在来看一点代码。

99. Не все, это короткий докладик, кое- что полярное, с чем я сам работал.

    并非全部内容，这是一个简短的报告，其中包含一些我亲自实践过的重点内容。

100. хром точка вот так вот вы имеете доступ к методам.

     chrome点……就这样，您便可以访问这些方法。

101. WebExtensions API, чтобы

     WebExtensions API，用于

102. делать какие- то вещи, которые вы не можете делать обычным JavaScript на обычных

     实现一些普通网页 JavaScript 无法完成的操作。

103. страницах. Это же браузерная экстеншн, они экстендят, расширяют

     这正是浏览器扩展——它们扩展、增强

104. функциональность.

     浏览器的功能。

105. Там можно много, есть много API, можно делать интересные штуки.

     可使用的 API 很多，能实现许多有趣的功能。

106. Вот Chrome Runtime Send Message, например, попап страница с background страницей

     例如 Chrome Runtime 的 sendMessage API，弹出页面（popup）和后台页面（background）

107. могут обмениваться сообщениями.

     可以互相发送消息。

108. например, папа с треском может послать на бэкграунд.

     比如弹出页面可以向后台页面发送消息。