{"id":402217,"date":"2024-06-29T16:21:39","date_gmt":"2024-06-29T16:21:39","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=402217"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=402217","title":{"rendered":"\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0425\u0430\u0431\u0440 \u0424\u0440\u0438\u043b\u0430\u043d\u0441\u0430 \u2014 \u0427\u0430\u0441\u0442\u044c \u043f\u0435\u0440\u0432\u0430\u044f<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

\u0425\u0430\u0431\u0440! \u041d\u0443 \u0442\u044b \u0436\u0435 \u043f\u0440\u043e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438… \u043d\u0443 \u0438 \u0433\u0434\u0435 \u0442\u0432\u043e\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 ? \u0427\u0442\u043e \u0436 \u0442\u044b, \u0444\u0440\u0430\u0435\u0440, \u0441\u0434\u0430\u043b \u043d\u0430\u0437\u0430\u0434…<\/p>\n

\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0444\u0440\u0438\u043b\u0430\u043d\u0441\u0435\u0440\u043e\u0432 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u0431\u0438\u0440\u0436\u0438 \u0425\u0430\u0431\u0440 \u0424\u0440\u0438\u043b\u0430\u043d\u0441, \u044f \u0442\u0430\u043c \u0441\u0430\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0435\u0449\u0435 \u0432 2018 \u0433\u043e\u0434\u0443, \u0442\u043e\u0433\u0434\u0430 \u0441\u0430\u0439\u0442 \u043d\u0430\u0437\u044b\u0432\u0430\u043b\u0441\u044f \u0435\u0449\u0435 \u0424\u0440\u0438\u043b\u0430\u043d\u0441\u0438\u043c.<\/p>\n

<\/figcaption><\/figure>\n

\u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u0442\u044c \u043e \u043d\u043e\u0432\u044b\u0445 \u0437\u0430\u0434\u0430\u0447\u0430\u0445, \u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044f\u0445 \u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u0445 \u043e\u0442 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u043e\u0432 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044f \u043a\u0430\u0436\u0434\u044b\u0435 15 \u0441\u0435\u043a\u0443\u043d\u0434. \u042d\u0442\u043e \u0432\u0435\u0441\u044c\u043c\u0430 \u0443\u0434\u043e\u0431\u043d\u043e \u043a\u043e\u0433\u0434\u0430 \u0434\u043e\u0440\u043e\u0436\u0438\u0448\u044c \u0438\u043c\u0435\u043d\u0435\u043c \u0438 \u0440\u0435\u043f\u0443\u0442\u0430\u0446\u0438\u0435\u0439, \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0448\u044c\u0441\u044f \u043a \u0437\u0430\u043a\u0430\u0437\u0430\u043c \u0438 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0430\u043c, \u044f \u0431\u044b\u043b \u043a\u0430\u043a \u0432 \u0440\u043e\u043b\u0438 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0430 \u0442\u0430\u043a \u0438 \u0444\u0440\u0438\u043b\u0430\u043d\u0441\u0435\u0440\u0430 \u0438 \u043f\u043e\u043d\u0438\u043c\u0430\u044e \u043e \u0447\u0435\u043c \u0433\u043e\u0432\u043e\u0440\u044e \u0443\u0436\u0430\u0441\u043d\u043e \u0442\u044f\u0436\u0435\u043b\u043e \u043e\u0431\u0449\u0430\u0442\u044c\u0441\u044f \u0441 \u0444\u0440\u0438\u043b\u0430\u043d\u0441\u0435\u0440\u0430\u043c\u0438 \u0438 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u043f\u043e \u0447\u0430\u0441\u0443. \u0414\u0430 \u0438 \u0447\u0435\u0441\u0442\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u044f \u0443\u0436\u0435 \u0434\u0435\u043b\u0430\u043b \u044d\u0442\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0432 \u0442\u043e\u043c \u0436\u0435 2018 \u0433\u043e\u0434\u0443, \u043d\u043e \u043f\u043e\u0442\u043e\u043c \u044f \u0443\u0448\u0435\u043b \u0441 \u0444\u0440\u0438\u043b\u0430\u043d\u0441\u0430 \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u0442\u0430\u043c \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b, \u043a\u043b\u0435\u0432\u043e\u0435 \u0431\u044b\u043b\u043e \u0432\u0440\u0435\u043c\u044f. \u041d\u043e \u0440\u0435\u0447\u044c \u043d\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c, \u0430 \u043e \u0442\u043e\u043c, \u043f\u043e\u0447\u0435\u043c\u0443 \u0425\u0430\u0431\u0440 \u0441\u0430\u043c \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u043b \u0442\u0430\u043a\u043e\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0445\u043e\u0442\u044f \u0431\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u0438\u043a\u0440\u0443\u0442\u0438\u043b \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0430\u0439\u0442? <\/p>\n

\u0425\u044b\u0445, \u0442\u044b \u0447\u0442\u043e, \u0441\u043b\u0435\u043f\u043e\u0439, \u0432\u043e\u0442 \u0436\u0435 \u043a\u043d\u043e\u043f\u043a\u0430 \u00ab\u041f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0437\u0430\u043a\u0430\u0437\u044b \u043d\u0430 \u043f\u043e\u0447\u0442\u0443\u00bb:<\/p>\n

<\/figcaption><\/figure>\n

\u042f \u043d\u0435 \u0441\u043b\u0435\u043f\u043e\u0439 \u0438 \u043a\u043d\u043e\u043f\u043a\u0443 \u044d\u0442\u043e \u043d\u0435 \u0442\u043e \u0447\u0442\u043e \u0432\u0438\u0436\u0443, \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u044f \u043b\u0438\u0447\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b \u00ab\u041f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0437\u0430\u043a\u0430\u0437\u044b \u043d\u0430 \u043f\u043e\u0447\u0442\u0443\u00bb \u0438 \u044f \u043c\u043e\u0433\u0443 \u0441 \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u0438 \u0443\u0434\u043e\u0431\u043d\u043e: \u043f\u043e\u043c\u0438\u043c\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0441\u043f\u0430\u043c \u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u0430\u0436\u043d\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0442\u0435\u0440\u044f\u044e\u0442\u0441\u044f \u0441\u0440\u0435\u0434\u0438 \u0437\u0430\u043a\u0430\u0437\u043e\u0432, \u0442\u0430\u043a \u044f \u0435\u0449\u0435 \u0438 \u043d\u0435 \u0442\u0430\u043a \u0447\u0430\u0441\u0442\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e \u043f\u043e\u0447\u0442\u0443, \u0441\u0447\u0438\u0442\u0430\u044e \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u0438 \u0443\u0434\u043e\u0431\u043d\u043e. \u0415\u0441\u043b\u0438 \u0441\u043e \u0432\u0442\u043e\u0440\u044b\u043c \u043c\u043e\u0436\u043d\u043e \u0435\u0449\u0435 \u043a\u0430\u043a-\u0442\u043e \u043c\u0438\u0440\u0438\u0442\u044c\u0441\u044f, \u0432\u043a\u043b\u044e\u0447\u0438\u0432, \u0441\u043a\u0430\u0436\u0435\u043c, \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u043e\u0442 gmail, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u044f \u0442\u043e\u043d\u043d\u044b \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a \u0442\u0435\u043c\u0435 \u043d\u0435 \u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f, \u0442\u043e \u043f\u0435\u0440\u0432\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e. \u0415\u0441\u043b\u0438 \u043d\u0435 \u0432\u0435\u0440\u0438\u0442\u0435 — \u043f\u043e\u0432\u0435\u0440\u044c\u0442\u0435, \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u044d\u0442\u043e.<\/p>\n

<\/figcaption><\/figure>\n

\u041d\u0443 \u0438 come on, \u0425\u0430\u0431\u0440, \u043f\u043e\u0447\u0442\u0430 \u0432 2\u043a21 \u0433\u043e\u0434\u0443 ? \u041d\u0443 \u0442\u0430\u043a\u043e\u0435… \u041d\u0430 \u043f\u0440\u043e\u0442\u044f\u0436\u0435\u043d\u0438\u0438 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u044f \u0435\u0449\u0435 \u043d\u0435 \u0440\u0430\u0437 \u0432\u0435\u0440\u043d\u0443\u0441\u044c \u043a \u0442\u043e\u043c\u0443, \u0441 \u0447\u0435\u0433\u043e \u043d\u0430\u0447\u0430\u043b \u044d\u0442\u0443 \u0441\u0442\u0430\u0442\u044c\u044e, \u0431\u0443\u0434\u0443 \u0440\u0430\u0437\u043e\u0431\u043b\u0430\u0447\u0430\u0442\u044c \u0425\u0430\u0431\u0440 \u043f\u043e \u043f\u043e\u043b\u043d\u043e\u0439, \u0430 \u043f\u043e\u0442\u043e\u043c \u043d\u0430\u0439\u0434\u0443 \u043a\u0443\u0441\u043a\u0438 \u0441\u0432\u043e\u0435\u0433\u043e \u043a\u043e\u0434\u0430 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u043f\u0440\u043e \u0433\u043e\u0432\u043d\u043e\u043a\u043e\u0434<\/a>. \u042f \u043d\u0435 \u0442\u0430\u043a \u0447\u0430\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u044e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043d\u0435 \u043e\u0441\u043e\u0431\u043e \u044d\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 \u0437\u0430\u043d\u044f\u0442\u0438\u0435, \u0445\u043e\u0442\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0438\u043c\u0435\u044e\u0442 \u043e\u0447\u0435\u043d\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b, \u043d\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f Google \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0436\u0435\u043b\u0430\u0442\u044c \u043b\u0443\u0447\u0448\u0435\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u0435\u0440\u0435\u0440\u044b\u0442\u044c \u0432\u0435\u0441\u044c \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0441\u043e \u043c\u043d\u043e\u0433\u0438\u043c\u0438 \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u044f\u043c\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435-\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u043c\u043d\u043e\u0433\u043e \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432. \u041f\u043e\u043b\u0435\u0437\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u0442\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u044f \u0431\u0443\u0434\u0443 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043f\u043e \u0445\u043e\u0434\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n

\u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0434\u0435\u043b\u0443, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0442\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0439!<\/p>\n

\u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0430\u043f\u043a\u0443 \u0441 \u0444\u0430\u0439\u043b\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u043e\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u043c \u0434\u0430\u043b\u044c\u0448\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c \u043f\u043e \u043c\u0435\u0440\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n

<\/figcaption><\/figure>\n

\u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0441 \u0444\u0430\u0439\u043b\u0430 manifest.json, \u0432 \u043d\u0435\u043c \u043c\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043d\u0435\u043a\u0438\u0439 \u043a\u043e\u043d\u0444\u0438\u0433 \u0432\u0441\u0435\u0433\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u0447\u043d\u0435\u043c \u0441 \u043d\u0435\u0433\u043e.<\/p>\n

\u041c\u0430\u043d\u0438\u0444\u0435\u0441\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 JSON \u0441 \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438, \u043c\u0430\u0441\u0441\u0438\u0432\u0430\u043c\u0438 \u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438, \u0432 \u0446\u0435\u043b\u043e\u043c \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e.<\/p>\n

<\/figcaption><\/figure>\n

\u041f\u0435\u0440\u0432\u044b\u0435 \u0442\u0440\u0438 \u043a\u043b\u044e\u0447\u0430 \u044d\u0442\u043e \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f\u043c\u0438: \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435, \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0438 \u0432\u0435\u0440\u0441\u0438\u044f, \u0430 \u0434\u0430\u043b\u044c\u0448\u0435 \u0443\u0436\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0439, manifest_version \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u0432\u0435\u0440\u0441\u0438\u044e \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u0430 \u0432\u0441\u0435\u0433\u043e \u043c\u043d\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e \u0434\u0432\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u044d\u0442\u043e 2 \u0438 3 \u043e\u043d\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u043f\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f, \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u043d\u0435 \u043b\u044e\u0431\u0438\u0442 3 \u0432\u0435\u0440\u0441\u0438\u044e \u0442\u0430\u043a \u043a\u0430\u043a \u0432 \u043d\u0435 \u0437\u0430\u043a\u0440\u0443\u0442\u0438\u043b\u0438 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0433\u0430\u0439\u043a\u0438, \u043d\u043e \u043d\u0430\u0441 \u044d\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0435 \u043a\u043e\u0441\u043d\u0443\u043b\u0438\u0441\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0438\u0448\u0435\u043c \u043d\u0430 3 \u0432\u0435\u0440\u0441\u0438\u0438, \u0442\u0430\u043a\u0436\u0435 \u0441\u0430\u043c google \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442 \u044d\u0442\u0443 \u0432\u0435\u0440\u0441\u0438\u044e \u043f\u043e\u0434 \u0443\u0433\u0440\u043e\u0437\u043e\u0439 \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0432 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043e\u0442 2 \u0432\u0435\u0440\u0441\u0438\u0438.\u00a0<\/p>\n

<\/figcaption><\/figure>\n

\u0414\u0430\u043b\u044c\u0448\u0435 \u0443 \u043d\u0430\u0441 \u0438\u0434\u0435\u0442 background.service_worker \u0432 2 \u0432\u0435\u0440\u0441\u0438\u0438 \u043e\u043d \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0444\u043e\u043d\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a \u0438 \u0432 \u043d\u044b\u043d\u0435\u0448\u043d\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442. \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043a\u0440\u0438\u043f\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0444\u043e\u043d\u0435 \u0438 \u043c\u043e\u0436\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u044f\u043a\u0438\u0435 \u0448\u0442\u0443\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c \u0441\u0430\u0439\u0442\u043e\u0432 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u044b \u043a \u0441\u0430\u0439\u0442\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c host_permissions (\u043f\u043e\u0434 \u0434\u043e\u0441\u0442\u0443\u043f\u0430\u043c\u0438 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043d\u044f\u0442\u0438\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 \u043d\u0430 \u043a\u0440\u043e\u0441\u0441\u0434\u043e\u043c\u0435\u043d\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b) \u041d\u0443 \u0438 \u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u0447\u0442\u043e \u043d\u0430\u0448 background.js \u0441\u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u0444\u043e\u043d\u0435 \u0432 \u0431\u043e\u043b\u0435\u0435 \u043e\u0431\u0449\u0435\u043c \u0441\u043c\u044b\u0441\u043b\u0435, \u0442\u043e \u0435\u0441\u0442\u044c \u0435\u0441\u043b\u0438 \u0434\u0430\u0436\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u0441\u0432\u0435\u0440\u043d\u0443\u0442 \u0441\u043a\u0440\u0438\u043f\u0442 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u0436\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f. \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0438 \u043e\u0442 2 \u0432\u0435\u0440\u0441\u0438\u0438 persistent (\u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c) \u0432 3 \u0432\u0435\u0440\u0441\u0438\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438 \u0435\u0441\u043b\u0438 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u0442\u0430\u0439\u043c\u0435\u0440 alarms \u0434\u043b\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043a\u0430\u0436\u0435\u043c setInterval \u0438\u043b\u0438 setTimeout \u0442\u043e service_worker \u0432 \u043e\u0434\u0438\u043d \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u0442\u0430\u043d\u0435\u0442 \u043d\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0438 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043d\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n

<\/figcaption><\/figure>\n

\u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435\u0441\u044c \u0445\u043e\u0442\u044f \u0431\u044b \u043e\u0434\u043d\u0438\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c \u0442\u043e \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u0437\u043d\u0430\u0435\u0442\u0435 \u043f\u0440\u043e action.default_popup \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0432\u043d\u0435\u0448\u043d\u044f\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u043e\u043a\u043d\u0435, \u043e\u0431\u044b\u0447\u043d\u043e \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e \u0441\u0443\u0442\u0438 \u043f\u0440\u043e\u0441\u0442\u043e html \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u0441 \u0442\u0430\u043a\u0438\u043c\u0438 \u0436\u0435 \u043e\u0431\u044b\u0447\u043d\u044b\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u0430\u043c\u0438, \u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u0438 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e \u0447\u0435\u0440\u0435\u0437 localStorage \u0438\u043b\u0438 \u0432 chrome \u043e\u043d\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e storage \u043d\u043e \u0441\u043c\u044b\u0441\u043b \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0438 \u043e\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0433\u043e localStorage \u0443 storage \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0438 \u0441\u0440\u0430\u0437\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c, \u0430 \u043d\u0435 \u0441\u0442\u0440\u043e\u043a\u043e\u0439 \u043d\u043e \u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u0447\u0435\u0440\u0435\u0437 \u043d\u0438\u0445 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 default_popup \u0432 service_worker \u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e. \u0421\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 \u00ab\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u00bb \u0438 \u00ab\u0431\u0435\u043a\u0435\u043d\u0434\u00bb.<\/p>\n

<\/figcaption><\/figure>\n

\u0427\u0442\u043e\u0431\u044b \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u044f\u043a\u0438\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0448\u0442\u0443\u043a\u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 permissions \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u043a \u0447\u0435\u043c\u0443 \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u044b, \u0442\u0443\u0442 \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e, \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a \u0438 \u0432 host_permissions \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u044b \u043a CORS \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0435\u0449\u0435 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0444\u043e\u0440\u043c\u044b \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 https:\/\/*.*\/* \u2014 \u0438\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 \u0442\u043e\u0433\u043e, \u0418\u041c\u0425\u041e c \u0434\u043e\u0441\u0442\u0443\u043f\u0430\u043c \u043a\u043e \u0432\u0441\u0435\u043c \u0441\u0430\u0439\u0442\u0430\u043c \u043f\u0440\u0438 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0443 \u043c\u043e\u0434\u0435\u0440\u0430\u0446\u0438\u0438.\u00a0<\/p>\n

\u041d\u0443 \u0432\u043e\u0442 \u043c\u044b \u0441\u043e\u0431\u0440\u0430\u043b\u0438 \u0440\u0430\u0431\u043e\u0447\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442 \u0444\u0430\u0439\u043b\u0430, \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0441\u0430\u0439\u0442\u0443 \u0438 \u0438\u0437\u0443\u0447\u0438\u043c \u0435\u0433\u043e.\u00a0\u041d\u0438\u0433\u0434\u0435 \u0443\u0436 \u0442\u043e\u0447\u043d\u043e \u044f\u0432\u043d\u043e \u043d\u0435 \u0441\u043a\u0430\u0437\u0430\u043d\u043e \u043e \u0442\u043e\u043c \u0447\u0442\u043e \u0443 \u0425\u0430\u0431\u0440\u0430 \u0435\u0441\u0442\u044c \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 API, \u043d\u0430\u0432\u0435\u0440\u043d\u043e \u043e\u043d \u0435\u0441\u0442\u044c, \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u043a\u0440\u044b\u0442\u044b\u0439 \u043e\u0442 \u043b\u044e\u0431\u043e\u043f\u044b\u0442\u043d\u044b\u0445 \u0433\u043b\u0430\u0437, \u043e\u043a\u0435\u0439. \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 https:\/\/freelance.habr.com\/tasks \u0441 \u0437\u0430\u0434\u0430\u0447\u0430\u043c\u0438 \u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u0441 \u043f\u0440\u0430\u0432\u0430, \u0435\u0441\u043b\u0438 \u043f\u043e\u043d\u0430\u0436\u0438\u043c\u0430\u0442\u044c \u043d\u0430 \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u0442\u043e \u0442\u0430\u0441\u043a\u0438 \u0437\u0430\u0434\u0430\u0447\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u0440\u0430\u043d\u0436\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c\u0441\u044f, \u0437\u043d\u0430\u0447\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f ajax \u0437\u0430\u043f\u0440\u043e\u0441, \u0447\u0442\u043e \u0432\u043f\u043e\u043b\u043d\u0435 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e.\u00a0<\/p>\n

<\/figcaption><\/figure>\n

\u041e\u043a\u0435\u0439 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c \u0432 \u0432\u043a\u043b\u0430\u0434\u043a\u0435 \u0441 \u0441\u0435\u0442\u044c\u044e, \u0445\u043c\u043c, \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u043d\u043e \u0425\u0430\u0431\u0440, \u043f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435 JSON ? \u0423\u0432\u0435\u0440\u0435\u043d \u0447\u0442\u043e \u0443\u0436\u0435 4 \u0433\u043e\u0434\u0430 \u044d\u0442\u043e \u0442\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c \u0441 \u0442\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0442\u043e\u0433\u0434\u0430 \u0431\u044b\u043b\u043e \u0442\u0430\u043a \u043f\u0440\u0438\u043d\u044f\u0442\u043e\u2026<\/p>\n

<\/figcaption><\/figure>\n

\u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043d\u0430\u043c \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e, \u0435\u0441\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0442\u043e\u0442 \u0436\u0435 mfc \u043c\u043e\u0436\u043d\u043e \u043e\u0447\u0430\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0435\u0449\u0435 \u0431\u043e\u043b\u044c\u0448\u0435.<\/p>\n

<\/figcaption><\/figure>\n

\u0425\u043e\u0440\u043e\u0448\u043e \u0447\u0442\u043e \u0445\u043e\u0442\u044c \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u043f\u043e\u0434\u043e\u0431\u0438\u0435 API \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c.\u00a0\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u0444\u0430\u0439\u043b background.js \u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u0435.<\/p>\n

const taskChecker = () =>   fetch(`https:\/\/freelance.habr.com\/tasks?_=${new Date() - 0}`, {     'headers': {       'accept': 'text\/javascript, application\/javascript, application\/ecmascript, application\/x-ecmascript, *\/*; q=0.01',       'x-requested-with': 'XMLHttpRequest'     }   })   .then(response => response.text())   .then(response => {     console.log(response)   })  ;(async () => {   await taskChecker() })(); <\/code><\/pre>\n
\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0442\u043e\u0442 \u0436\u0435 JavaScript \u0447\u0442\u043e \u0438 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 (\u0438\u0437\u0432\u0438\u043d\u0438\u0442\u0435)<\/p>\n
\"\"
<\/figcaption><\/figure>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u0430\u0440\u0441\u0435\u0440 \u0434\u0430\u043d\u043d\u044b\u0445, \u0431\u0440\u0430\u0442\u044c \u0431\u0443\u0434\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e: \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u0446\u0435\u043d\u0443 \u0438 id \u0437\u0430\u0434\u0430\u0447\u0438. \u041c\u043d\u0435 \u0431\u044b \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043d\u043d\u0443 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043d\u043e DOMParser \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a window \u0438 document, \u044d\u0442\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0432 service_worker \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0441\u0435 \u043d\u0430 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043a\u0430\u0445<\/a><\/p>\n
const tasksParser = response => {   const taskHTML = response     .replace(\/\\n\/gi, '')     .match(\/var content = '';var pagination = '';content \\+= \".+;pagination \\+= \"\/gi)[0]     .replace(\/(var content = '';var pagination = '';content \\+= \"|;pagination \\+= \")\/gi, '')     .replace(\/\\\\\/gi, '')    const tasksTitle = taskHTML                       .match(\/class=\"task__title\" title=\"[^\"]+\/gi)                       .map(                         html =>                           html.replace(\/class=\"task__title\" title=\"\/, '').trim()                       )    const tasksCount = taskHTML                       .match(\/(span class='count'|span class='negotiated_price')>[^<]+\/gi)                       .map(                         html =>                           html.replace(\/(span class='count'|span class='negotiated_price')>\/, '').trim()                       )                          const tasksId = taskHTML                       .match(\/<a href=\"\\\/tasks\\\/\\d+\/gi)                       .map(                         html =>                           html.replace(\/<a href=\"\\\/tasks\\\/\/, '').trim()                       )    return Array(tasksTitle.length).fill(false).map((_, i) => ({     title: tasksTitle[i],     count: tasksCount[i],     id: tasksId[i]   })) }  const taskChecker = () =>   fetch(`https:\/\/freelance.habr.com\/tasks?_=${new Date() - 0}`, {     'headers': {       'accept': 'text\/javascript, application\/javascript, application\/ecmascript, application\/x-ecmascript, *\/*; q=0.01',       'x-requested-with': 'XMLHttpRequest'     }   })   .then(response => response.text())   .then(response => {     const tasks = tasksParser(response)      console.log(tasks)   })    ;(async () => {   await taskChecker() })();<\/code><\/pre>\n
<\/figcaption><\/figure>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0437\u0430\u0434\u0430\u0447\u0438 \u0432 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0438\u0434\u0435, \u043f\u043e\u0440\u0430 \u0438\u0445 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439.<\/p>\n
const taskChecker = () =>   fetch(`https:\/\/freelance.habr.com\/tasks?_=${new Date() - 0}`, {     'headers': {       'accept': 'text\/javascript, application\/javascript, application\/ecmascript, application\/x-ecmascript, *\/*; q=0.01',       'x-requested-with': 'XMLHttpRequest'     }   })   .then(response => response.text())   .then(response => {     const tasks = tasksParser(response)      tasks.forEach(({ title, count, id }, i) => {       const notificationId = id        chrome.notifications.create(notificationId, {         title: '\u0417\u0430\u043a\u0430\u0437\u044b',         message: `${title} \u2014 ${count}`,         iconUrl: \u2018\/logo.jpg',         type: 'basic'       })     })   })  ;(async () => {   await taskChecker() })();<\/code><\/pre>\n
<\/figcaption><\/figure>\n
\u041d\u043e \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u0438\u043c\u0435\u043b\u043e \u0445\u043e\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u0441\u043c\u044b\u0441\u043b, \u0441\u0435\u0439\u0447\u0430\u0441 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043f\u043e \u043d\u0438\u043c, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0432\u0435\u0441\u0438\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043d\u0430 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435 \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a onClicked.<\/p>\n
chrome.notifications.create('id-1485\u2019, { \/* ... *\/ })    chrome.notifications.onClicked.addListener(data => {   \/\/ \u0432 data \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u044c id \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 'id-1485\u2019 })<\/code><\/pre>\n
\u0418 \u0441 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0447\u0442\u043e \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e, \u044d\u0445, \u0430 \u0441\u0447\u0430\u0441\u0442\u044c\u0435 \u0431\u044b\u043b\u043e \u0442\u0430\u043a \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e… \u041d\u043e \u043d\u0435\u0442, \u0432\u0441\u0435 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0438 \u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e, \u0443 \u043d\u0430\u0441 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0442\u0440\u0438 \u0442\u0438\u043f\u0430 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439 \u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u043a\u0430\u043a\u0443\u044e \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u043d\u0430\u043c \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0447\u0438\u0441\u043b\u043e\u0432\u043e\u0439 id, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e \u0441\u0443\u0442\u0438 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0437\u0430\u0434\u0430\u0447\u0443, \u0430 \u0442\u0438\u043f \u0438 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b. \u0412\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a:\u00a0<\/p>\n
chrome.notifications.onClicked.addListener(data => {   const [type, id] = data.split('_')    if (type === 'task' || type === 'invite') {     chrome.tabs.create({ url: `https:\/\/freelance.habr.com\/tasks\/${id}` })   }    if (type === 'dialog') {     const [taskId, dialogId] = id.split('-')     chrome.tabs.create({ url: `https:\/\/freelance.habr.com\/tasks\/${taskId}\/conversations\/${dialogId}` })   } }) <\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n
const taskChecker = () =>   fetch(`https:\/\/freelance.habr.com\/tasks?_=${new Date() - 0}`, {     'headers': {       'accept': 'text\/javascript, application\/javascript, application\/ecmascript, application\/x-ecmascript, *\/*; q=0.01',       'x-requested-with': 'XMLHttpRequest'     }   })   .then(response => response.text())   .then(response => {     const tasks = tasksParser(response)      tasks.forEach(({ title, count, id }, i) => {       const notificationId = 'task_'+id        chrome.notifications.create(notificationId, {         title: '\u0417\u0430\u043a\u0430\u0437\u044b',         message: `${title} \u2014 ${count}`,         iconUrl: '\/plug.jpg',         type: 'basic'       })     })   })  chrome.notifications.onClicked.addListener(data => {   const [type, id] = data.split('_')    if (type === 'task') {     chrome.tabs.create({ url: `https:\/\/freelance.habr.com\/tasks\/${id}` })   } })  ;(async () => {   await taskChecker() })(); <\/code><\/pre>\n
<\/figcaption><\/figure>\n
\u042d\u0439, \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0442\u0430\u0440\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u043f\u043e\u0441\u043b\u0435 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u0440\u044b\u0445 \u043e\u043d\u0438 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u043d\u043e\u0432\u0430, \u044d\u0442\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0435\u0439 \u043f\u043e id \u0438 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u043c \u0444\u043b\u0430\u0436\u043a\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442 \u0441\u0442\u0430\u0440\u044b\u0435 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f, \u0430 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u044f \u043d\u0435 \u0434\u0430\u0441\u0442 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043d\u043e\u0432\u044b\u043c \u043f\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437, \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0443\u0436\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u043c \u0432 storage, id \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u043d\u043e\u0441\u0438\u0442\u044c \u0432 storage \u0438 \u043f\u043e\u043c\u0435\u0447\u0430\u0442\u044c \u043a\u0430\u043a true, \u0430 \u043f\u043e\u0442\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0434\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u0442\u043e-\u0442\u043e \u0441\u043a\u0430\u0436\u0435\u0442, \u0430 \u043f\u043e\u0447\u0435\u043c\u0443 \u0441\u0440\u0430\u0437\u0443 \u0432 storage, \u0430 \u043d\u0435 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u0430\u0442\u044c \u0432 \u043e\u0434\u0438\u043d \u043c\u043e\u043c\u0435\u043d\u0442 \u043e\u0447\u0435\u043d\u044c \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u0438\u043c \u0434\u0435\u043b\u043e\u043c, \u043f\u0440\u043e\u0449\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0435\u0441\u0442\u044c \u043b\u0438 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 \u043a\u043b\u044e\u0447 \u0441 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c true. \u0412\u044b\u043d\u0435\u0441\u0435\u043c \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u0430\u043c\u0430 \u0432 \u0441\u0435\u0431\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u043d\u0443\u0436\u043d\u043e \u043b\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435. \u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n
\n\u041a\u0430\u043a \u043d\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e<\/summary>\n
\n
let SKIP_MESSAGES = true \/\/ \u0444\u043b\u0430\u0436\u043e\u043a  const delay = ms => new Promise(res => setTimeout(res, ms))  const pushNotification = (id, option) => {   chrome.storage.local.get(state => {     SKIP_MESSAGES || state[id] || chrome.notifications.create(id, option)      chrome.storage.local.set({ [id]: true }, () => { \/* save *\/ })   }) }  const taskChecker = () => {   \/\/ \u2026   pushNotification(id, options) }  chrome.alarms.create({ periodInMinutes: 0.15 }) \/\/ \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b \u0432 15 \u0441\u0435\u043a\u0443\u043d\u0434  ;(() => {   await taskChecker()   await delay(5000) \/\/ \u0437\u0430\u0434\u0435\u0440\u0436\u0438\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0447\u0442\u043e\u0431 \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0432\u0441\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439      SKIP_MESSAGES = false \/* \u0420\u0430\u0437\u0440\u0435\u0448\u0430\u0435\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u043b\u0438 \u0432\u0441\u0435 \u0441\u0442\u0430\u0440\u044b\u0435 *\/    chrome.alarms.onAlarm.addListener(async () => {     await taskChecker()   }) })();<\/code><\/pre>\n<\/div>\n<\/details>\n
const delay = ms => new Promise(res => setTimeout(res, ms))  const pushNotification = (id, option) => {   chrome.storage.local.get(async state => {     const storage = await chrome.storage.local.get(['SKIP_MESSAGES'])     storage.SKIP_MESSAGES || state[id] || chrome.notifications.create(id, option)     chrome.storage.local.set({ [id]: true }, () => { \/* save *\/ })   }) }  const taskChecker = () => {   \/\/ \u2026   pushNotification(id, options) }  chrome.alarms.create({ periodInMinutes: 0.15 }) \/\/ \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b \u0432 15 \u0441\u0435\u043a\u0443\u043d\u0434  ;(() => {   const storage = await chrome.storage.local.get(['SKIP_MESSAGES'])   if (storage.SKIP_MESSAGES === undefined) {     await chrome.storage.local.set({ SKIP_MESSAGES: true })   }    await taskChecker()    await chrome.storage.local.set({ SKIP_MESSAGES: false }) \/* \u0420\u0430\u0437\u0440\u0435\u0448\u0430\u0435\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u043b\u0438 \u0432\u0441\u0435 \u0441\u0442\u0430\u0440\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 *\/      chrome.alarms.onAlarm.addListener(async () => {     await taskChecker()   }) })();<\/code><\/pre>\n
<\/figcaption><\/figure>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0448\u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u044e \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0437\u0430\u043a\u0430\u0437\u044b \u043f\u0440\u044f\u043c\u043e \u043d\u0430 \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u0441\u0442\u043e\u043b \u0438 \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043d\u043e \u044d\u0442\u043e \u0435\u0449\u0435 \u043d\u0435 \u0432\u0441\u0435, \u0432\u0435\u0434\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044f, \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u0438 \u0434\u0438\u0430\u043b\u043e\u0433\u0438 \u0441 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0430\u043c\u0438. \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e, \u0442\u0443\u0442 \u0432\u0441\u0435 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u0430\u043a \u0438 \u0441 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f\u043c\u0438 \u043e \u0437\u0430\u0434\u0430\u0447\u0430\u0445. \u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 https:\/\/freelance.habr.com\/my\/responses<\/a> \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u043e\u0442\u043a\u043b\u0438\u043a\u0438 \u0438 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u043a\u0430\u0437\u044b, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u043d\u0438, \u0442\u043e\u0447\u043d\u0435\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0442\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043e\u0442\u043a\u043b\u0438\u043a\u043d\u0443\u043b\u0438\u0441\u044c. \u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435, \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043e\u0442 \u0438\u043c\u0435\u043d\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0434\u0435\u043b\u0430\u0432 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u044d\u0442\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0430\u0448\u0438 \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n
<\/figcaption><\/figure>\n
API ? \u0415\u0433\u043e \u0442\u0443\u0442 \u0442\u043e\u0436\u0435 \u043d\u0435\u0442, \u0442\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u0447\u0442\u0438 \u043d\u0435\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0430\u0440\u0430\u043c\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438 \u0432\u044b\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0437\u0430\u043a\u0430\u0437\u043e\u0432, \u043f\u043e-\u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u043d\u0430\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 \u0434\u0438\u0430\u043b\u043e\u0433\u0438 \u0441 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0430\u043c\u0438 \u0438 \u043d\u0435 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f.\u00a0<\/p>\n
const getResponses = () =>   fetch('https:\/\/freelance.habr.com\/my\/responses')     .then(response => response.text())     .then(response => response.match(\/\\\/tasks\\\/\\d+\/gi).map(task => task.match(\/\\d+\/)[0]))<\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 id \u0437\u0430\u0434\u0430\u0447, \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0434\u0438\u0430\u043b\u043e\u0433\u0438 \u0441 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0430\u043c\u0438, \u0435\u0441\u043b\u0438 \u0437\u0430\u043a\u0430\u0437 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d \u0438\u043b\u0438 \u043f\u043e \u043a\u0430\u043a\u0438\u043c-\u0442\u043e \u0434\u0440\u0443\u0433\u0438\u043c \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c \u0434\u0438\u0430\u043b\u043e\u0433 \u0441 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u043e\u043c \u043d\u0435 \u043e\u0442\u043a\u0440\u044b\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c false, \u043f\u043e\u0442\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u0443\u0435\u043c.<\/p>\n
const getOwnerDialog = taskId =>   fetch(`https:\/\/freelance.habr.com\/tasks\/${taskId}`)     .then(response => response.text())     .then(       response => (         hrefDialog =>           hrefDialog             ? `https:\/\/freelance.habr.com${hrefDialog}`             : false       )(         response.match(\/\\\/tasks\\\/\\d+\\\/conversations\\\/\\d+\/)       )     ) <\/code><\/pre>\n
\u041f\u043e\u043b\u0443\u0447\u0438\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043e\u0442 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0430, \u0442\u0430\u043a\u0436\u0435 \u0435\u0433\u043e \u0430\u0432\u0430\u0442\u0430\u0440\u043a\u0443. \u0414\u0430 \u0442\u0443\u0442 \u0435\u0441\u0442\u044c \u0432\u043f\u043e\u043b\u043d\u0435 \u0432\u043d\u044f\u0442\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442 JSON, \u043d\u043e \u043a\u0430\u043a \u0431\u044b \u043c\u043d\u0435 \u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043f\u043e\u0445\u0432\u0430\u043b\u0438\u0442\u044c \u0425\u0430\u0431\u0440, \u0432\u0441\u0435 \u0442\u0430\u043a\u0438 \u0438 \u0442\u0443\u0442 \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u043c\u0430\u0445, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0447\u0430\u0442 \u0441 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u043e\u043c\/\u0438\u0441\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u0435\u043c \u044d\u0442\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u0435\u0437 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0442\u043e \u0435\u0441\u0442\u044c \u0447\u0430\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u043f\u0440\u0430\u0432\u0434\u044b \u0440\u0430\u0434\u0438 \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u043a\u043d\u043e\u043f\u043e\u0447\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u00ab\u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0447\u0430\u0442\u00bb \u043d\u043e \u044d\u0442\u043e \u0442\u0430\u043a \u0433\u043b\u0443\u043f\u043e, \u044d\u0442\u043e \u0436\u0435 \u0447\u0430\u0442…<\/p>\n
<\/figcaption><\/figure>\n
const getOwnerMessages = dialogUrl =>   fetch(dialogUrl, {     'headers': {       'accept': 'application\/json'     }   })   .then(response => response.json())   .then(({ conversation: { hirer: { user }, messages } }) => ({     username: user.username,     avatar: user.avatar.src2x,     messages: messages                 .filter(message => message.user.username === user.username)                 .map(message => ({ body: message.body, id: message.id }))   }))<\/code><\/pre>\n
\u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u0435\u0441\u044c \u043d\u0430\u0448 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0432 \u043e\u0434\u043d\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e dialogChecker. \u0422\u0443\u0442 \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a \u0441 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f\u043c\u0438 \u043e \u0437\u0430\u043a\u0430\u0437\u0430\u0445.<\/p>\n
const dialogChecker = async () => {   const responses = await getResponses()    const responsesDialogUrls = (     await Promise.all(responses.map(getOwnerDialog))   )   .filter(f => f)    const ownerMessages = (     await Promise.all(responsesDialogUrls.map(getOwnerMessages))   )    ownerMessages.forEach(({ avatar, messages, username }, i) => {     const [taskId, dialogId] = responsesDialogUrls[i].match(\/\\d+\/gi)      messages.forEach(message => {       const notificationId = 'dialog_'+taskId+'-'+dialogId+'-'+message.id        pushNotification(notificationId, {         title: `\u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0442 ${username}`,         message: message.body,         iconUrl: avatar.match(\/https\/) ? avatar : `https:\/\/freelance.habr.com\/${avatar}`, \/\/ \u043d\u0443 \u0432\u043e\u0442 \u0442\u0430\u043a \u0445\u0430\u0431\u0440         type: 'basic'       })     })   }) }<\/code><\/pre>\n
<\/figcaption><\/figure>\n
\u0412\u0441\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442, \u044d\u0442\u043e \u043f\u043e\u0431\u0435\u0434\u0430! \u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044f\u043c \u0443 \u043c\u0435\u043d\u044f \u043a\u0430\u043a \u0440\u0430\u0437 \u0435\u0441\u0442\u044c \u043e\u0434\u043d\u043e \u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u0435. \u041e\u0442\u043a\u0440\u043e\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044f\u043c\u0438 \u0438 \u0441\u043f\u0430\u0440\u0441\u0438\u043c \u0442\u0430\u043c \u0432\u0441\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n
const getInvites = () =>   fetch('https:\/\/freelance.habr.com\/my\/responses\/invites')     .then(response => response.text())     .then(response => response.match(\/\\\/tasks\\\/\\d+\/gi).map(task => task.match(\/\\d+\/)[0]))<\/code><\/pre>\n
\u0418 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0438 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u043d\u0443\u044e \u0446\u0435\u043d\u0443.<\/p>\n
const getTask = async taskId =>   fetch(`https:\/\/freelance.habr.com\/tasks\/${taskId}`)     .then(response => response.text())     .then(response => {       try {         const title = response                         .match(\/<meta content='[^']+\/gi)[0]                         .replace(\"<meta content='\", '')          const count = response                         .match(\/(class='negotiated_price'>[^<]+|class='count'>[^<]+)\/gi)[0]                         .replace(\/(class='negotiated_price'>|class='count'>)\/, '')                         .trim()         return {           id: taskId,           title,           count         }       } catch (e) {         return false       }     })<\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0435 \u0441\u043e\u0431\u0435\u0440\u0435\u043c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0447\u0435\u043a\u0435\u0440 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c.<\/p>\n
const inviteChecker = async () => {   const invites = await getInvites()    const taskInvites = (     await Promise.all(invites.map(getTask))   )   .filter(f => f)    taskInvites.forEach(({ title, count, id }, i) => {     const notificationId = 'invite_'+id      pushNotification(notificationId, {       title: '\u0412\u0430\u0441 \u043f\u0440\u0438\u0433\u043b\u0430\u0441\u0438\u043b\u0438',       message: `${title} \u2014 ${count}`,       iconUrl: '\/logo.jpg',       type: 'basic'     })   }) }<\/code><\/pre>\n
<\/figcaption><\/figure>\n
\u041d\u043e \u043a\u0430\u043a \u0436\u0435 \u0444\u0438\u043b\u044c\u0442\u0440\u044b? \u041d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447\u0430\u0445 \u043f\u043e \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u043c \u0441\u043b\u043e\u0432\u0430\u043c \u0438 \u0434\u0440\u0443\u0433\u0438\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0438\u0445, \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043a\u0430\u043a \u0443\u0436\u0435 \u0440\u0430\u043d\u0435\u0435 \u043f\u0438\u0441\u0430\u043b \u0447\u0435\u0440\u0435\u0437 storage, \u0431\u0443\u0434\u0435\u043c \u0431\u0440\u0430\u0442\u044c \u043e\u0442\u0442\u0443\u0434\u0430 \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0437 \u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443. \u041f\u0440\u0438\u0434\u0443\u043c\u0430\u043b \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0443\u0441\u043b\u043e\u0432\u0438\u0439 \u0434\u043b\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432:\u00a0<\/p>\n
const taskChecker = () =>   chrome.storage.local.get(({     q = '',     categories = '',     fields = '',     only_urgent = '',     safe_deal = '',     only_with_price = '',     only_mentioned = ''   }) =>     fetch(`https:\/\/freelance.habr.com\/tasks?_=${       new Date() - 0     }${       q ? `&q=${q}` : ''     }${       categories ? `&categories=${categories}` : ''     }${       fields ? `&fields=${fields}` : ''     }${       only_urgent ? `&only_urgent=${only_urgent}` : ''     }${       safe_deal ? `&safe_deal=${safe_deal}` : ''     }${       only_with_price ? `&only_with_price=${only_with_price}` : ''     }${       only_mentioned ? `&only_mentioned=${only_mentioned}` : ''     }`, {       'headers': {         'accept': 'text\/javascript, application\/javascript, application\/ecmascript, application\/x-ecmascript, *\/*; q=0.01',         'x-requested-with': 'XMLHttpRequest'       }     })     .then(response => response.text())     .then(response => {        console.log(         `https:\/\/freelance.habr.com\/tasks?_=${           new Date() - 0         }${           q ? `&q=${q}` : ''         }${           categories ? `&categories=${categories}` : ''         }${           fields ? `&fields=${fields}` : ''         }${           only_urgent ? `&only_urgent=${only_urgent}` : ''         }${           safe_deal ? `&safe_deal=${safe_deal}` : ''         }${           only_with_price ? `&only_with_price=${only_with_price}` : ''         }${           only_mentioned ? `&only_mentioned=${only_mentioned}` : ''         }`       )        const tasks = tasksParser(response)        tasks.forEach(({ title, count, id }, i) => {         const notificationId = 'task_'+id          pushNotification(notificationId, {           title: '\u0417\u0430\u043a\u0430\u0437\u044b',           message: `${title} \u2014 ${count}`,           iconUrl: '\/logo.jpg',           type: 'basic'         })       })     })   )<\/code><\/pre>\n
\u0422\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0430 \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u0444\u0430\u0439\u043b index.html \u0438 \u0432\u043d\u0435\u0441\u0435\u043c \u0442\u0443\u0434\u0430 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 HTML \u043a\u043e\u0434 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0430.<\/p>\n
<!DOCTYPE html> <html lang=\"en\"> <head>   <meta charset=\"UTF-8\">   <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">   <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">   <title>Habr Freelance<\/title> <\/head> <body>   <input type=\"text\" id=\"q\" \/>   <script src=\"index.js\"><\/script> <\/body> <\/html><\/code><\/pre>\n
\u0410 \u0432 index.js \u0437\u0430\u043f\u0438\u0448\u0435\u043c \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0439 \u0441\u043a\u0440\u0438\u043f\u0442 \u0442\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0430 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u00ab\u043e\u0442\u043b\u0430\u0434\u043e\u0447\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u00bb \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f:<\/p>\n
const search = document.getElementById('q')  chrome.storage.local.get(({ q = '', categories = '' }) => {   search.value = q })  search.addEventListener('input', () => {   chrome.storage.local.set({ q: search.value }, () => {}) }) <\/code><\/pre>\n
<\/figcaption><\/figure>\n
\u0421\u0432\u044f\u0437\u044c \u0441 \u00ab\u0424\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u043e\u043c\u00bb \u0435\u0441\u0442\u044c, \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u0435\u0433\u043e \u043e\u0444\u043e\u0440\u043c\u0438\u0442\u044c, \u0434\u043b\u044f \u044d\u0442\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u043e\u0439 \u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0441\u0430\u0439\u0442\u0430, \u044d\u0442\u043e \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e, \u043f\u0440\u0430\u0432\u0434\u0430 \u0441 JS \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043f\u043e\u0432\u043e\u0437\u0438\u0442\u044c\u0441\u044f\u2026<\/p>\n
<\/figcaption><\/figure>\n
\u0422\u0430\u043a \u043a\u0430\u043a default_popup \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0438 \u043e\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0438\u043c\u0435\u0435\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0435\u0433\u043e\u0441\u044f \u0432 \u043d\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u0442\u0430\u043a\u0436\u0435 body \u0438\u043c\u0435\u0435\u0442 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0432 8px. \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0438 \u0441\u0442\u0438\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0431\u0443\u0434\u0435\u043c \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0439. \u0414\u043b\u044f index.html<\/p>\n
<!DOCTYPE html> <html lang=\"ru\">     <head>         <meta charset=\"UTF-8\" \/>         <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>         <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" \/>         <link rel=\"stylesheet\" href=\"style.css\" \/>         <title>Habr Freelance<\/title>     <\/head>     <body>         <div class=\"custom-form\">                      <\/div>         <script src=\"index.js\"><\/script>     <\/body> <\/html> <\/code><\/pre>\n
\u0418 \u0434\u043b\u044f style.css<\/p>\n
body {   margin: 0px;   padding: 0px; }  .custom-form {   width: 300px;   height: 500px;   overflow-y: scroll;   background: #fff; }<\/code><\/pre>\n
<\/figcaption><\/figure>\n
\u041a\u0430\u043a \u0438\u0442\u043e\u0433 \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u043f\u0443\u0441\u0442\u0443\u044e \u0431\u0435\u043b\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u0435\u0440\u0441\u0442\u043a\u0443 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 \u0441 \u0425\u0430\u0431\u0440\u0430. \u0421\u0430\u043c\u044b\u0439 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0431\u043b\u043e\u043a \u044d\u0442\u043e \u0422\u0435\u0433 dl, \u0435\u0433\u043e \u043c\u044b \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0435\u043c \u0438 \u0432\u0441\u0442\u0430\u0432\u0438\u043c \u0432 \u043d\u0430\u0448 \u0442\u0435\u0433 <div class=»custom-form\u00bb>\u2026<\/div><\/strong> \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u0438 \u0432\u044b\u0440\u0430\u0432\u043d\u044f\u0442\u044c \u0435\u0433\u043e \u0432 https:\/\/unminify.com\/<\/a> \u0442\u0430\u043a \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043b\u0443\u0447\u0448\u0435 \u0447\u0438\u0442\u0430\u0435\u043c.<\/p>\n
<\/figcaption><\/figure>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u0432 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0431\u0435\u0437 \u0441\u0442\u0438\u043b\u0435\u0439:<\/p>\n
<\/figcaption><\/figure>\n
\u041d\u043e \u044d\u0442\u043e \u0435\u0449\u0435 \u043d\u0435 \u0432\u0441\u0435, \u0442\u0430\u043a\u0436\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0441\u0430\u0439\u0442\u0430, \u043d\u0438\u0447\u0435\u0433\u043e \u043b\u0443\u0447\u0448\u0435 \u044f \u043d\u0435 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b \u0447\u0435\u043c \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0444\u0430\u0439\u043b \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 https:\/\/freelance.habr.com\/assets\/application-93fe068befcaa9935821090c87283a9087b951f125a361d5125e6d5d749460e6.css<\/a> (\u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044f) \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0442\u0442\u0443\u0434\u0430 css.<\/p>\n
<\/figcaption><\/figure>\n
\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n
<\/figcaption><\/figure>\n
\u041d\u0435 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u0447\u0442\u043e \u0442\u0443\u0442 \u043d\u0435 \u0442\u0430\u043a, \u043d\u043e \u043d\u0435 \u0442\u0430\u043a \u0442\u0443\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e \u0447\u0442\u043e \u0438\u043a\u043e\u043d\u043a\u0438 \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f, \u0432\u0441\u0435 \u044d\u0442\u043e \u0438\u0437 \u0437\u0430 \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u043f\u0443\u0442\u0438 \u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0444\u0430\u0439\u043b\u044b \u0432 css \u0438\u043c\u0435\u044e\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435, \u0430 \u043d\u0435 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0435 \u043f\u0443\u0442\u0438, \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u043c \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0437\u0430\u043c\u0435\u043d\u044b \u0442\u0435\u043a\u0441\u0442\u0430 \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435.<\/p>\n
<\/figcaption><\/figure>\n
\u00a0\u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0448\u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u0431\u044b\u043b\u0438 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u043e\u0439 \u043a\u0430\u043a \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0431\u043b\u043e\u043a \u043f\u043e\u0438\u0441\u043a\u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0432 \u0435\u0433\u043e \u0441 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u0430\u0439\u0442\u0430, \u0431\u043b\u043e\u043a \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 \u0442\u0435\u0433\u0430 <div class=»search-suggest»><\/strong> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0433\u043e \u043d\u0430\u0434 dl<\/strong> \u0442\u0435\u0433\u043e\u043c.<\/p>\n
<\/figcaption><\/figure>\n
\u0421\u0430\u043c \u043f\u043e\u0438\u0441\u043a \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0444\u043e\u0440\u043c\u044b \u0441 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u043c\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c, \u0432\u0441\u0435\u0433\u043e \u043d\u0430 10px.<\/p>\n
<\/figcaption><\/figure>\n
\u041d\u0430\u0439\u0434\u0435\u043c \u0435\u0433\u043e \u0432 style.css \u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u043d\u0430:<\/p>\n
<\/figcaption><\/figure>\n
\u041e\u043a\u0435\u0439, \u0442\u0435\u043f\u0435\u0440\u044c \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0434\u043e\u043b\u0436\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0447\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043d\u0435\u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u043e \u0437\u0430\u043a\u0430\u0437\u0430\u0445, \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u0445 \u0438\u043b\u0438 \u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u0435\u043c.<\/p>\n
<\/figcaption><\/figure>\n
\u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0432 index.js \u043a\u043e\u0434 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u043e\u0431\u044a\u0435\u043c\u043d\u044b\u043c \u0438 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c \u043d\u0430 \u043a\u0443\u0441\u043e\u0447\u043a\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0441\u0442\u0430\u0432\u0438\u043c \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n
\n\u041c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430<\/summary>\n
\n
\/\/ \u0432\u0441\u0435 \u043a\u043d\u043e\u043f\u043e\u0447\u043a\u0438 \u0438 \u0431\u043b\u043e\u043a\u0438 const search = document.getElementById('q')     , _categories = [...document.querySelectorAll('.category-group__folder')]     , searchOptions = document.querySelector('.dropdown_inline')     , options = [...searchOptions.querySelectorAll('[class=\"checkbox_flat\"]')]     , toggler = searchOptions.querySelector('.toggler')     , arrow = document.querySelector('.icon-Arrow').cloneNode()     , onlyMentioned = document.querySelector('#only_mentioned')     , onlyWithPrice = document.querySelector('#only_with_price')     , safeDeal = document.querySelector('#safe_deal')     , onlyUrgent = document.querySelector('#only_urgent')     , notifyTask = document.querySelector('#notify_task')     , notifyMessageOwner = document.querySelector('#notify_message_owner')     , notifyInvite = document.querySelector('#notify_invite')     , cancel = document.querySelector('#cancel')   \/\/ \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0432\u0441\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0437 storage chrome.storage.local.get(({   q = '',   categories = '',   fields = '',   only_urgent = '',   safe_deal = '',   only_with_price = '',   only_mentioned = '',   notify_task = true,   notify_message_owner = true,   notify_invite = true }) => {   \/\/ \u043f\u043e\u0438\u0441\u043a   search.value = q    \/\/ \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u044b   onlyUrgent.checked = !!only_urgent   safeDeal.checked = !!safe_deal   onlyWithPrice.checked = !!only_with_price   onlyMentioned.checked = !!only_mentioned    notifyTask.checked = notify_task   notifyMessageOwner.checked = notify_message_owner   notifyInvite.checked = notify_invite    \/\/ \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u043f\u043e \u0442\u0435\u0433\u0430\u043c, \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u043c \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044e   const searchOptionsValue = fields.split(',')    options.forEach((option, i) => {     const checkbox = option.querySelector('input[type=\"checkbox\"]')     searchOptionsValue.includes(checkbox.getAttribute('name'))       ? checkbox.checked = true       : checkbox.checked = false   })    const checkboxs = options                       .map(option => option.querySelector('input[type=\"checkbox\"]'))                       .flat()    const labels = options                   .map(option => option.querySelector('.checkbox__label'))                   .flat()    const selectLabels = checkboxs                           .map(                             (checkbox, i) =>                               checkbox.checked                                 ? labels[i].innerHTML                                 : false                           )                           .filter(option => option)                           .join(', ')    toggler.innerHTML = selectLabels.length === 0                         ? '\u0418\u0441\u043a\u0430\u0442\u044c \u0432\u0435\u0437\u0434\u0435'                         : '\u0418\u0441\u043a\u0430\u0442\u044c ' + selectLabels   toggler.appendChild(arrow)     \/\/ \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438   const categoriesValue = categories.split(',')    _categories     .forEach(       category =>         [           ...category.querySelectorAll('input[type=\"checkbox\"]')         ].forEach(           checkbox =>             categoriesValue.includes(checkbox.getAttribute('id'))               ? (checkbox.checked = true)               : false         )     )    _categories.forEach((category, i) => {     const checkboxs = [...category.querySelectorAll('input[type=\"checkbox\"]')]      const selectedCount = checkboxs.reduce((ctx, checkbox) => ctx + checkbox.checked, 0)      if (selectedCount === 0) {       category.classList.remove('full')       category.classList.remove('part')       return     }      if (selectedCount === checkboxs.length) {       category.classList.add('full')       category.classList.remove('part')       return     }      if (selectedCount > 0) {       category.classList.add('part')       category.classList.remove('full')       return     }   }) })  \/\/ \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0437 \u043f\u043e\u0438\u0441\u043a\u0430 search.addEventListener('input', () => {   chrome.storage.local.set({ q: search.value }, () => {}) })  \/\/ \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0438\u0437 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439 const categoryHandler = () => {   const categoriesValue = _categories                             .map(                               category =>                                 [                                   ...category.querySelectorAll('input[type=\"checkbox\"]')                                 ].map(                                   checkbox =>                                     checkbox.checked                                       ? checkbox.getAttribute('id')                                       : false                                 )                             )                             .flat()                             .filter(category => category)                             .join(',')    chrome.storage.local.set({ categories: categoriesValue }, () => {}) }  \/\/ \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0438\u0437 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0445 \u043e\u043f\u0446\u0438\u0439  const searchOptionHandler = () => {   const searchOptionsValue = options                               .map(                                 option =>                                   [                                     ...option.querySelectorAll('input[type=\"checkbox\"]')                                   ].map(                                     checkbox =>                                       checkbox.checked                                         ? checkbox.getAttribute('name')                                         : false                                   )                               )                               .flat()                               .filter(category => category)                               .join(',')    chrome.storage.local.set({ fields: searchOptionsValue }, () => {}) }  \/\/ \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f\u043c\u0438 _categories.forEach((category, i) => {   const mainCheckbox = category.querySelector('.checkbox_pseudo')   const checkboxs = [...category.querySelectorAll('input[type=\"checkbox\"]')]   const title = category.querySelector('.link_dotted')    title.addEventListener('click', () => {     category.classList.contains('category-group__folder_open')       ? category.classList.remove('category-group__folder_open')       : category.classList.add('category-group__folder_open')   })    mainCheckbox.addEventListener('click', () => {     if (category.classList.contains('full')) {       category.classList.remove('full')       category.classList.remove('part')       checkboxs.forEach(checkbox => {         checkbox.checked = false       })       categoryHandler()     } else {       category.classList.add('full')       category.classList.remove('part')       checkboxs.forEach(checkbox => {         checkbox.checked = true       })       categoryHandler()     }   })    checkboxs.forEach(checkbox => {     checkbox.addEventListener('input', () => {       categoryHandler()       const selectedCount = checkboxs.reduce((ctx, checkbox) => ctx + checkbox.checked, 0)        if (selectedCount === 0) {         category.classList.remove('full')         category.classList.remove('part')         return       }        if (selectedCount === checkboxs.length) {         category.classList.add('full')         category.classList.remove('part')         return       }        if (selectedCount > 0) {         category.classList.add('part')         category.classList.remove('full')         return       }     })   }) })  \/\/ \u043e\u0442\u043a\u0440\u044b\u0442\u044c\/\u0437\u0430\u043a\u0440\u044b\u0442\u044c \u043e\u043f\u0446\u0438\u0438 \u043f\u043e\u0438\u0441\u043a\u0430 searchOptions.addEventListener('click', () => {   searchOptions.classList.contains('open')     ? searchOptions.classList.remove('open')     : searchOptions.classList.add('open') })  \/\/ \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u043f\u0446\u0438\u044f\u043c\u0438 \u043f\u043e\u0438\u0441\u043a\u0430  options.forEach((option, i) => {   const checkboxs = options                       .map(option => option.querySelector('input[type=\"checkbox\"]'))                       .flat()    const labels = options                   .map(option => option.querySelector('.checkbox__label'))                   .flat()    checkboxs[i].addEventListener('input', () => {     const selectLabels = checkboxs                           .map(                             (checkbox, i) =>                               checkbox.checked                                 ? labels[i].innerHTML                                 : false                           )                           .filter(option => option)                           .join(', ')      toggler.innerHTML = selectLabels.length === 0                           ? '\u0418\u0441\u043a\u0430\u0442\u044c \u0432\u0435\u0437\u0434\u0435'                           : '\u0418\u0441\u043a\u0430\u0442\u044c ' + selectLabels     toggler.appendChild(arrow)     searchOptionHandler()   }) })  \/\/ \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u043e\u0432 onlyMentioned.addEventListener('input', () => {   chrome.storage.local.set({ only_mentioned: onlyMentioned.checked ? 'true' : '' }, () => {}) })  onlyWithPrice.addEventListener('input', () => {   chrome.storage.local.set({ only_with_price: onlyWithPrice.checked ? 'true' : '' }, () => {}) })  safeDeal.addEventListener('input', () => {   chrome.storage.local.set({ safe_deal: safeDeal.checked ? 'true' : '' }, () => {}) })  onlyUrgent.addEventListener('input', () => {   chrome.storage.local.set({ only_urgent: onlyUrgent.checked ? 'true' : '' }, () => {}) })  notifyTask.addEventListener('input', () => {   chrome.storage.local.set({ notify_task: notifyTask.checked }, () => {}) })  notifyMessageOwner.addEventListener('input', () => {   chrome.storage.local.set({ notify_message_owner: notifyMessageOwner.checked }, () => {}) })  notifyInvite.addEventListener('input', () => {   chrome.storage.local.set({ notify_invite: notifyInvite.checked }, () => {}) })  \/\/ \u0441\u0442\u0438\u0440\u0430\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f cancel.addEventListener('click', () => {   chrome.storage.local.set({     q: '',     categories: '',     fields: '',     only_urgent: '',     safe_deal: '',     only_with_price: '',     only_mentioned: '',   }, () => {     location.reload()   }) }) <\/code><\/pre>\n<\/div>\n<\/details>\n
<\/figcaption><\/figure>\n
\u041e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u0434 \u0432\u044b \u043d\u0430\u0439\u0434\u0435\u0442\u0435 \u043d\u0430 \u043c\u043e\u0435\u043c GitHub<\/a>. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0438\u043a\u043e\u043d\u043a\u0438 \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044e \u0432 manifest.json.<\/p>\n
<\/figcaption><\/figure>\n
\u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0443\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 GitHub<\/a>, \u043e\u0442\u0442\u0443\u0434\u0430, \u0441\u043a\u0430\u0447\u0430\u0432 \u0435\u0433\u043e, \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0439 chrome:\/\/extensions\/<\/a><\/p>\n
\u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u0443\u0435\u043c \u044d\u0442\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0432 Chrome Web Store \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0430\u0433\u0430\u0437\u0438\u043d\u0430\u0445 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0439.<\/p>\n
\u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0430\u0448\u043b\u0438 \u043e\u0448\u0438\u0431\u043a\u0438 \u0432 \u0442\u0435\u043a\u0441\u0442\u0435, \u043f\u0438\u0448\u0438\u0442\u0435 \u0432 \u043b\u0441.<\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n

 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/articles\/592967\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n
\n
\n
\n
\n
\u0425\u0430\u0431\u0440! \u041d\u0443 \u0442\u044b \u0436\u0435 \u043f\u0440\u043e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438… \u043d\u0443 \u0438 \u0433\u0434\u0435 \u0442\u0432\u043e\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 ? \u0427\u0442\u043e \u0436 \u0442\u044b, \u0444\u0440\u0430\u0435\u0440, \u0441\u0434\u0430\u043b \u043d\u0430\u0437\u0430\u0434…<\/p>\n
\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0444\u0440\u0438\u043b\u0430\u043d\u0441\u0435\u0440\u043e\u0432 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u0431\u0438\u0440\u0436\u0438 \u0425\u0430\u0431\u0440 \u0424\u0440\u0438\u043b\u0430\u043d\u0441, \u044f \u0442\u0430\u043c \u0441\u0430\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0435\u0449\u0435 \u0432 2018 \u0433\u043e\u0434\u0443, \u0442\u043e\u0433\u0434\u0430 \u0441\u0430\u0439\u0442 \u043d\u0430\u0437\u044b\u0432\u0430\u043b\u0441\u044f \u0435\u0449\u0435 \u0424\u0440\u0438\u043b\u0430\u043d\u0441\u0438\u043c.<\/p>\n
<\/figcaption><\/figure>\n
\u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u0442\u044c \u043e \u043d\u043e\u0432\u044b\u0445 \u0437\u0430\u0434\u0430\u0447\u0430\u0445, \u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044f\u0445 \u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u0445 \u043e\u0442 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u043e\u0432 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044f \u043a\u0430\u0436\u0434\u044b\u0435 15 \u0441\u0435\u043a\u0443\u043d\u0434. \u042d\u0442\u043e \u0432\u0435\u0441\u044c\u043c\u0430 \u0443\u0434\u043e\u0431\u043d\u043e \u043a\u043e\u0433\u0434\u0430 \u0434\u043e\u0440\u043e\u0436\u0438\u0448\u044c \u0438\u043c\u0435\u043d\u0435\u043c \u0438 \u0440\u0435\u043f\u0443\u0442\u0430\u0446\u0438\u0435\u0439, \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0448\u044c\u0441\u044f \u043a \u0437\u0430\u043a\u0430\u0437\u0430\u043c \u0438 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0430\u043c, \u044f \u0431\u044b\u043b \u043a\u0430\u043a \u0432 \u0440\u043e\u043b\u0438 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0430 \u0442\u0430\u043a \u0438 \u0444\u0440\u0438\u043b\u0430\u043d\u0441\u0435\u0440\u0430 \u0438 \u043f\u043e\u043d\u0438\u043c\u0430\u044e \u043e \u0447\u0435\u043c \u0433\u043e\u0432\u043e\u0440\u044e \u0443\u0436\u0430\u0441\u043d\u043e \u0442\u044f\u0436\u0435\u043b\u043e \u043e\u0431\u0449\u0430\u0442\u044c\u0441\u044f \u0441 \u0444\u0440\u0438\u043b\u0430\u043d\u0441\u0435\u0440\u0430\u043c\u0438 \u0438 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u043f\u043e \u0447\u0430\u0441\u0443. \u0414\u0430 \u0438 \u0447\u0435\u0441\u0442\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u044f \u0443\u0436\u0435 \u0434\u0435\u043b\u0430\u043b \u044d\u0442\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0432 \u0442\u043e\u043c \u0436\u0435 2018 \u0433\u043e\u0434\u0443, \u043d\u043e \u043f\u043e\u0442\u043e\u043c \u044f \u0443\u0448\u0435\u043b \u0441 \u0444\u0440\u0438\u043b\u0430\u043d\u0441\u0430 \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u0442\u0430\u043c \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b, \u043a\u043b\u0435\u0432\u043e\u0435 \u0431\u044b\u043b\u043e \u0432\u0440\u0435\u043c\u044f. \u041d\u043e \u0440\u0435\u0447\u044c \u043d\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c, \u0430 \u043e \u0442\u043e\u043c, \u043f\u043e\u0447\u0435\u043c\u0443 \u0425\u0430\u0431\u0440 \u0441\u0430\u043c \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u043b \u0442\u0430\u043a\u043e\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0445\u043e\u0442\u044f \u0431\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u0438\u043a\u0440\u0443\u0442\u0438\u043b \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0430\u0439\u0442? <\/p>\n
\u0425\u044b\u0445, \u0442\u044b \u0447\u0442\u043e, \u0441\u043b\u0435\u043f\u043e\u0439, \u0432\u043e\u0442 \u0436\u0435 \u043a\u043d\u043e\u043f\u043a\u0430 \u00ab\u041f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0437\u0430\u043a\u0430\u0437\u044b \u043d\u0430 \u043f\u043e\u0447\u0442\u0443\u00bb:<\/p>\n
<\/figcaption><\/figure>\n
\u042f \u043d\u0435 \u0441\u043b\u0435\u043f\u043e\u0439 \u0438 \u043a\u043d\u043e\u043f\u043a\u0443 \u044d\u0442\u043e \u043d\u0435 \u0442\u043e \u0447\u0442\u043e \u0432\u0438\u0436\u0443, \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u044f \u043b\u0438\u0447\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b \u00ab\u041f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0437\u0430\u043a\u0430\u0437\u044b \u043d\u0430 \u043f\u043e\u0447\u0442\u0443\u00bb \u0438 \u044f \u043c\u043e\u0433\u0443 \u0441 \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u0438 \u0443\u0434\u043e\u0431\u043d\u043e: \u043f\u043e\u043c\u0438\u043c\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0441\u043f\u0430\u043c \u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u0430\u0436\u043d\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0442\u0435\u0440\u044f\u044e\u0442\u0441\u044f \u0441\u0440\u0435\u0434\u0438 \u0437\u0430\u043a\u0430\u0437\u043e\u0432, \u0442\u0430\u043a \u044f \u0435\u0449\u0435 \u0438 \u043d\u0435 \u0442\u0430\u043a \u0447\u0430\u0441\u0442\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e \u043f\u043e\u0447\u0442\u0443, \u0441\u0447\u0438\u0442\u0430\u044e \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u0438 \u0443\u0434\u043e\u0431\u043d\u043e. \u0415\u0441\u043b\u0438 \u0441\u043e \u0432\u0442\u043e\u0440\u044b\u043c \u043c\u043e\u0436\u043d\u043e \u0435\u0449\u0435 \u043a\u0430\u043a-\u0442\u043e \u043c\u0438\u0440\u0438\u0442\u044c\u0441\u044f, \u0432\u043a\u043b\u044e\u0447\u0438\u0432, \u0441\u043a\u0430\u0436\u0435\u043c, \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u043e\u0442 gmail, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u044f \u0442\u043e\u043d\u043d\u044b \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a \u0442\u0435\u043c\u0435 \u043d\u0435 \u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f, \u0442\u043e \u043f\u0435\u0440\u0432\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e. \u0415\u0441\u043b\u0438 \u043d\u0435 \u0432\u0435\u0440\u0438\u0442\u0435 — \u043f\u043e\u0432\u0435\u0440\u044c\u0442\u0435, \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u044d\u0442\u043e.<\/p>\n
<\/figcaption><\/figure>\n
\u041d\u0443 \u0438 come on, \u0425\u0430\u0431\u0440, \u043f\u043e\u0447\u0442\u0430 \u0432 2\u043a21 \u0433\u043e\u0434\u0443 ? \u041d\u0443 \u0442\u0430\u043a\u043e\u0435… \u041d\u0430 \u043f\u0440\u043e\u0442\u044f\u0436\u0435\u043d\u0438\u0438 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u044f \u0435\u0449\u0435 \u043d\u0435 \u0440\u0430\u0437 \u0432\u0435\u0440\u043d\u0443\u0441\u044c \u043a \u0442\u043e\u043c\u0443, \u0441 \u0447\u0435\u0433\u043e \u043d\u0430\u0447\u0430\u043b \u044d\u0442\u0443 \u0441\u0442\u0430\u0442\u044c\u044e, \u0431\u0443\u0434\u0443 \u0440\u0430\u0437\u043e\u0431\u043b\u0430\u0447\u0430\u0442\u044c \u0425\u0430\u0431\u0440 \u043f\u043e \u043f\u043e\u043b\u043d\u043e\u0439, \u0430 \u043f\u043e\u0442\u043e\u043c \u043d\u0430\u0439\u0434\u0443 \u043a\u0443\u0441\u043a\u0438 \u0441\u0432\u043e\u0435\u0433\u043e \u043a\u043e\u0434\u0430 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u043f\u0440\u043e \u0433\u043e\u0432\u043d\u043e\u043a\u043e\u0434<\/a>. \u042f \u043d\u0435 \u0442\u0430\u043a \u0447\u0430\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u044e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043d\u0435 \u043e\u0441\u043e\u0431\u043e \u044d\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 \u0437\u0430\u043d\u044f\u0442\u0438\u0435, \u0445\u043e\u0442\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0438\u043c\u0435\u044e\u0442 \u043e\u0447\u0435\u043d\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b, \u043d\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f Google \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0436\u0435\u043b\u0430\u0442\u044c \u043b\u0443\u0447\u0448\u0435\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u0435\u0440\u0435\u0440\u044b\u0442\u044c \u0432\u0435\u0441\u044c \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0441\u043e \u043c\u043d\u043e\u0433\u0438\u043c\u0438 \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u044f\u043c\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435-\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u043c\u043d\u043e\u0433\u043e \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432. \u041f\u043e\u043b\u0435\u0437\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u0442\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u044f \u0431\u0443\u0434\u0443 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043f\u043e \u0445\u043e\u0434\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n
\u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0434\u0435\u043b\u0443, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0442\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0439!<\/p>\n
\u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0430\u043f\u043a\u0443 \u0441 \u0444\u0430\u0439\u043b\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u043e\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u043c \u0434\u0430\u043b\u044c\u0448\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c \u043f\u043e \u043c\u0435\u0440\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n
<\/figcaption><\/figure>\n
\u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0441 \u0444\u0430\u0439\u043b\u0430 manifest.json, \u0432 \u043d\u0435\u043c \u043c\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043d\u0435\u043a\u0438\u0439 \u043a\u043e\u043d\u0444\u0438\u0433 \u0432\u0441\u0435\u0433\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u0447\u043d\u0435\u043c \u0441 \u043d\u0435\u0433\u043e.<\/p>\n
\u041c\u0430\u043d\u0438\u0444\u0435\u0441\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 JSON \u0441 \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438, \u043c\u0430\u0441\u0441\u0438\u0432\u0430\u043c\u0438 \u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438, \u0432 \u0446\u0435\u043b\u043e\u043c \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e.<\/p>\n
<\/figcaption><\/figure>\n
\u041f\u0435\u0440\u0432\u044b\u0435 \u0442\u0440\u0438 \u043a\u043b\u044e\u0447\u0430 \u044d\u0442\u043e \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f\u043c\u0438: \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435, \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0438 \u0432\u0435\u0440\u0441\u0438\u044f, \u0430 \u0434\u0430\u043b\u044c\u0448\u0435 \u0443\u0436\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0439, manifest_version \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u0432\u0435\u0440\u0441\u0438\u044e \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u0430 \u0432\u0441\u0435\u0433\u043e \u043c\u043d\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e \u0434\u0432\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u044d\u0442\u043e 2 \u0438 3 \u043e\u043d\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u043f\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f, \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u043d\u0435 \u043b\u044e\u0431\u0438\u0442 3 \u0432\u0435\u0440\u0441\u0438\u044e \u0442\u0430\u043a \u043a\u0430\u043a \u0432 \u043d\u0435 \u0437\u0430\u043a\u0440\u0443\u0442\u0438\u043b\u0438 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0433\u0430\u0439\u043a\u0438, \u043d\u043e \u043d\u0430\u0441 \u044d\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0435 \u043a\u043e\u0441\u043d\u0443\u043b\u0438\u0441\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0438\u0448\u0435\u043c \u043d\u0430 3 \u0432\u0435\u0440\u0441\u0438\u0438, \u0442\u0430\u043a\u0436\u0435 \u0441\u0430\u043c google \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442 \u044d\u0442\u0443 \u0432\u0435\u0440\u0441\u0438\u044e \u043f\u043e\u0434 \u0443\u0433\u0440\u043e\u0437\u043e\u0439 \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0432 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043e\u0442 2 \u0432\u0435\u0440\u0441\u0438\u0438.\u00a0<\/p>\n
<\/figcaption><\/figure>\n
\u0414\u0430\u043b\u044c\u0448\u0435 \u0443 \u043d\u0430\u0441 \u0438\u0434\u0435\u0442 background.service_worker \u0432 2 \u0432\u0435\u0440\u0441\u0438\u0438 \u043e\u043d \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0444\u043e\u043d\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a \u0438 \u0432 \u043d\u044b\u043d\u0435\u0448\u043d\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442. \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043a\u0440\u0438\u043f\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0444\u043e\u043d\u0435 \u0438 \u043c\u043e\u0436\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u044f\u043a\u0438\u0435 \u0448\u0442\u0443\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c \u0441\u0430\u0439\u0442\u043e\u0432 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u044b \u043a \u0441\u0430\u0439\u0442\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c host_permissions (\u043f\u043e\u0434 \u0434\u043e\u0441\u0442\u0443\u043f\u0430\u043c\u0438 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043d\u044f\u0442\u0438\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 \u043d\u0430 \u043a\u0440\u043e\u0441\u0441\u0434\u043e\u043c\u0435\u043d\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b) \u041d\u0443 \u0438 \u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u0447\u0442\u043e \u043d\u0430\u0448 background.js \u0441\u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u0444\u043e\u043d\u0435 \u0432 \u0431\u043e\u043b\u0435\u0435 \u043e\u0431\u0449\u0435\u043c \u0441\u043c\u044b\u0441\u043b\u0435, \u0442\u043e \u0435\u0441\u0442\u044c \u0435\u0441\u043b\u0438 \u0434\u0430\u0436\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u0441\u0432\u0435\u0440\u043d\u0443\u0442 \u0441\u043a\u0440\u0438\u043f\u0442 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u0436\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f. \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0438 \u043e\u0442 2 \u0432\u0435\u0440\u0441\u0438\u0438 persistent (\u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c) \u0432 3 \u0432\u0435\u0440\u0441\u0438\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438 \u0435\u0441\u043b\u0438 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u0442\u0430\u0439\u043c\u0435\u0440 alarms \u0434\u043b\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043a\u0430\u0436\u0435\u043c setInterval \u0438\u043b\u0438 setTimeout \u0442\u043e service_worker \u0432 \u043e\u0434\u0438\u043d \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u0442\u0430\u043d\u0435\u0442 \u043d\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0438 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043d\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n
<\/figcaption><\/figure>\n
\u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435\u0441\u044c \u0445\u043e\u0442\u044f \u0431\u044b \u043e\u0434\u043d\u0438\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c \u0442\u043e \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u0437\u043d\u0430\u0435\u0442\u0435 \u043f\u0440\u043e action.default_popup \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0432\u043d\u0435\u0448\u043d\u044f\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u043e\u043a\u043d\u0435, \u043e\u0431\u044b\u0447\u043d\u043e \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e \u0441\u0443\u0442\u0438 \u043f\u0440\u043e\u0441\u0442\u043e html \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u0441 \u0442\u0430\u043a\u0438\u043c\u0438 \u0436\u0435 \u043e\u0431\u044b\u0447\u043d\u044b\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u0430\u043c\u0438, \u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u0438 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e \u0447\u0435\u0440\u0435\u0437 localStorage \u0438\u043b\u0438 \u0432 chrome \u043e\u043d\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e storage \u043d\u043e \u0441\u043c\u044b\u0441\u043b \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0438 \u043e\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0433\u043e localStorage \u0443 storage \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0438 \u0441\u0440\u0430\u0437\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c, \u0430 \u043d\u0435 \u0441\u0442\u0440\u043e\u043a\u043e\u0439 \u043d\u043e \u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u0447\u0435\u0440\u0435\u0437 \u043d\u0438\u0445 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 default_popup \u0432 service_worker \u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e. \u0421\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 \u00ab\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u00bb \u0438 \u00ab\u0431\u0435\u043a\u0435\u043d\u0434\u00bb.<\/p>\n
<\/figcaption><\/figure>\n
\u0427\u0442\u043e\u0431\u044b \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u044f\u043a\u0438\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0448\u0442\u0443\u043a\u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 permissions \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u043a \u0447\u0435\u043c\u0443 \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u044b, \u0442\u0443\u0442 \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e, \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a \u0438 \u0432 host_permissions \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u044b \u043a CORS \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0435\u0449\u0435 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0444\u043e\u0440\u043c\u044b \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 https:\/\/*.*\/* \u2014 \u0438\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 \u0442\u043e\u0433\u043e, \u0418\u041c\u0425\u041e c \u0434\u043e\u0441\u0442\u0443\u043f\u0430\u043c \u043a\u043e \u0432\u0441\u0435\u043c \u0441\u0430\u0439\u0442\u0430\u043c \u043f\u0440\u0438 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0443 \u043c\u043e\u0434\u0435\u0440\u0430\u0446\u0438\u0438.\u00a0<\/p>\n
\u041d\u0443 \u0432\u043e\u0442 \u043c\u044b \u0441\u043e\u0431\u0440\u0430\u043b\u0438 \u0440\u0430\u0431\u043e\u0447\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442 \u0444\u0430\u0439\u043b\u0430, \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0441\u0430\u0439\u0442\u0443 \u0438 \u0438\u0437\u0443\u0447\u0438\u043c \u0435\u0433\u043e.\u00a0\u041d\u0438\u0433\u0434\u0435 \u0443\u0436 \u0442\u043e\u0447\u043d\u043e \u044f\u0432\u043d\u043e \u043d\u0435 \u0441\u043a\u0430\u0437\u0430\u043d\u043e \u043e \u0442\u043e\u043c \u0447\u0442\u043e \u0443 \u0425\u0430\u0431\u0440\u0430 \u0435\u0441\u0442\u044c \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 API, \u043d\u0430\u0432\u0435\u0440\u043d\u043e \u043e\u043d \u0435\u0441\u0442\u044c, \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u043a\u0440\u044b\u0442\u044b\u0439 \u043e\u0442 \u043b\u044e\u0431\u043e\u043f\u044b\u0442\u043d\u044b\u0445 \u0433\u043b\u0430\u0437, \u043e\u043a\u0435\u0439. \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 https:\/\/freelance.habr.com\/tasks \u0441 \u0437\u0430\u0434\u0430\u0447\u0430\u043c\u0438 \u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u0441 \u043f\u0440\u0430\u0432\u0430, \u0435\u0441\u043b\u0438 \u043f\u043e\u043d\u0430\u0436\u0438\u043c\u0430\u0442\u044c \u043d\u0430 \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u0442\u043e \u0442\u0430\u0441\u043a\u0438 \u0437\u0430\u0434\u0430\u0447\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u0440\u0430\u043d\u0436\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c\u0441\u044f, \u0437\u043d\u0430\u0447\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f ajax \u0437\u0430\u043f\u0440\u043e\u0441, \u0447\u0442\u043e \u0432\u043f\u043e\u043b\u043d\u0435 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e.\u00a0<\/p>\n
<\/figcaption><\/figure>\n
\u041e\u043a\u0435\u0439 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c \u0432 \u0432\u043a\u043b\u0430\u0434\u043a\u0435 \u0441 \u0441\u0435\u0442\u044c\u044e, \u0445\u043c\u043c, \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u043d\u043e \u0425\u0430\u0431\u0440, \u043f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435 JSON ? \u0423\u0432\u0435\u0440\u0435\u043d \u0447\u0442\u043e \u0443\u0436\u0435 4 \u0433\u043e\u0434\u0430 \u044d\u0442\u043e \u0442\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c \u0441 \u0442\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0442\u043e\u0433\u0434\u0430 \u0431\u044b\u043b\u043e \u0442\u0430\u043a \u043f\u0440\u0438\u043d\u044f\u0442\u043e\u2026<\/p>\n
<\/figcaption><\/figure>\n
\u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043d\u0430\u043c \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e, \u0435\u0441\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0442\u043e\u0442 \u0436\u0435 mfc \u043c\u043e\u0436\u043d\u043e \u043e\u0447\u0430\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0435\u0449\u0435 \u0431\u043e\u043b\u044c\u0448\u0435.<\/p>\n
<\/figcaption><\/figure>\n
\u0425\u043e\u0440\u043e\u0448\u043e \u0447\u0442\u043e \u0445\u043e\u0442\u044c \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u043f\u043e\u0434\u043e\u0431\u0438\u0435 API \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c.\u00a0\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u0444\u0430\u0439\u043b background.js \u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u0435.<\/p>\n
const taskChecker = () =>   fetch(`https:\/\/freelance.habr.com\/tasks?_=${new Date() - 0}`, {     'headers': {       'accept': 'text\/javascript, application\/javascript, application\/ecmascript, application\/x-ecmascript, *\/*; q=0.01',       'x-requested-with': 'XMLHttpRequest'     }   })   .then(response => response.text())   .then(response => {     console.log(response)   })  ;(async () => {   await taskChecker() })(); <\/code><\/pre>\n
\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0442\u043e\u0442 \u0436\u0435 JavaScript \u0447\u0442\u043e \u0438 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 (\u0438\u0437\u0432\u0438\u043d\u0438\u0442\u0435)<\/p>\n
<\/figcaption><\/figure>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u0430\u0440\u0441\u0435\u0440 \u0434\u0430\u043d\u043d\u044b\u0445, \u0431\u0440\u0430\u0442\u044c \u0431\u0443\u0434\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e: \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u0446\u0435\u043d\u0443 \u0438 id \u0437\u0430\u0434\u0430\u0447\u0438. \u041c\u043d\u0435 \u0431\u044b \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043d\u043d\u0443 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043d\u043e DOMParser \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a window \u0438 document, \u044d\u0442\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0432 service_worker \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0441\u0435 \u043d\u0430 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043a\u0430\u0445<\/a><\/p>\n
const tasksParser = response => {   const taskHTML = response     .replace(\/\\n\/gi, '')     .match(\/var content = '';var pagination = '';content \\+= \".+;pagination \\+= \"\/gi)[0]     .replace(\/(var content = '';var pagination = '';content \\+= \"|;pagination \\+= \")\/gi, '')     .replace(\/\\\\\/gi, '')    const tasksTitle = taskHTML                       .match(\/class=\"task__title\" title=\"[^\"]+\/gi)                       .map(                         html =>                           html.replace(\/class=\"task__title\" title=\"\/, '').trim()                       )    const tasksCount = taskHTML                       .match(\/(span class='count'|span class='negotiated_price')>[^<]+\/gi)                       .map(                         html =>                           html.replace(\/(span class='count'|span class='negotiated_price')>\/, '').trim()                       )                          const tasksId = taskHTML                       .match(\/<a href=\"\\\/tasks\\\/\\d+\/gi)                       .map(                         html =>                           html.replace(\/<a href=\"\\\/tasks\\\/\/, '').trim()                       )    return Array(tasksTitle.length).fill(false).map((_, i) => ({     title: tasksTitle[i],     count: tasksCount[i],     id: tasksId[i]   })) }  const taskChecker = () =>   fetch(`https:\/\/freelance.habr.com\/tasks?_=${new Date() - 0}`, {     'headers': {       'accept': 'text\/javascript, application\/javascript, application\/ecmascript, application\/x-ecmascript, *\/*; q=0.01',       'x-requested-with': 'XMLHttpRequest'     }   })   .then(response => response.text())   .then(response => {     const tasks = tasksParser(response)      console.log(tasks)   })    ;(async () => {   await taskChecker() })();<\/code><\/pre>\n
<\/figcaption><\/figure>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0437\u0430\u0434\u0430\u0447\u0438 \u0432 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0438\u0434\u0435, \u043f\u043e\u0440\u0430 \u0438\u0445 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439.<\/p>\n
const taskChecker = () =>   fetch(`https:\/\/freelance.habr.com\/tasks?_=${new Date() - 0}`, {     'headers': {       'accept': 'text\/javascript, application\/javascript, application\/ecmascript, application\/x-ecmascript, *\/*; q=0.01',       'x-requested-with': 'XMLHttpRequest'     }   })   .then(response => response.text())   .then(response => {     const tasks = tasksParser(response)      tasks.forEach(({ title, count, id }, i) => {       const notificationId = id        chrome.notifications.create(notificationId, {         title: '\u0417\u0430\u043a\u0430\u0437\u044b',         message: `${title} \u2014 ${count}`,         iconUrl: \u2018\/logo.jpg',         type: 'basic'       })     })   })  ;(async () => {   await taskChecker() })();<\/code><\/pre>\n
<\/figcaption><\/figure>\n
\u041d\u043e \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u0438\u043c\u0435\u043b\u043e \u0445\u043e\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u0441\u043c\u044b\u0441\u043b, \u0441\u0435\u0439\u0447\u0430\u0441 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043f\u043e \u043d\u0438\u043c, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0432\u0435\u0441\u0438\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043d\u0430 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435 \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a onClicked.<\/p>\n
chrome.notifications.create('id-1485\u2019, { \/* ... *\/ })    chrome.notifications.onClicked.addListener(data => {   \/\/ \u0432 data \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u044c id \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 'id-1485\u2019 })<\/code><\/pre>\n
\u0418 \u0441 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0447\u0442\u043e \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e, \u044d\u0445, \u0430 \u0441\u0447\u0430\u0441\u0442\u044c\u0435 \u0431\u044b\u043b\u043e \u0442\u0430\u043a \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e… \u041d\u043e \u043d\u0435\u0442, \u0432\u0441\u0435 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0438 \u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e, \u0443 \u043d\u0430\u0441 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0442\u0440\u0438 \u0442\u0438\u043f\u0430 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439 \u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u043a\u0430\u043a\u0443\u044e \u0432\u043a\u043b\u0430\u0434\u043a\u0443<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-402217","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/402217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=402217"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/402217\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=402217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=402217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=402217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}