Расширение для Opera нужны советы по JS

@Skript47 · Регистрация: 05.11.2014

Студворк — интернет-сервис помощи студентам

Не знаю правильно ли выбрана категория, но у меня есть вопросы к экспертам.
Тема создания браузерных расширений очень плохо раскрыта к сожалению, я даже не знаю с кем можно посоветоваться. Нужна собственно только оценка кода и советы по его улучшению:

Экспертом я не являюсь потому код следующий:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
var elems = document.getElementsByTagName('label');
for (var i = 0; i < elems.length; i++) {
    elems[i].innerHTML = chrome.i18n.getMessage(elems[i].getAttribute('i18n'));
}
 
var textbox = document.getElementById('textbox');
var count = document.getElementById('count');
var t1 = document.getElementById("T1");
var t2 = document.getElementById("T2");
var t3 = document.getElementById("T3");
 
chrome.storage.local.get('YTlist', function(result) {
    var values = result['YTlist'];
    t1.checked = values.watched;
    t2.checked = values.onlyURL;
    t3.checked = values.shortURL;
});
 
setTimeout(GetList, 400);
 
t1.addEventListener("change", SaveData, true);
t2.addEventListener("change", SaveData, true);
t3.addEventListener("change", SaveData, true);
 
function SaveData() {
    var values = new Object();
    values['watched'] = t1.checked;
    values['onlyURL'] = t2.checked;
    values['shortURL'] = t3.checked;
    chrome.storage.local.set({
        'YTlist': values
    });
    GetList();
}
 
function GetList() {
    chrome.tabs.getSelected(null, function(tab) {
        var values = new Object();
        values['watched'] = t1.checked;
        values['onlyURL'] = t2.checked;
        values['shortURL'] = t3.checked;
        chrome.tabs.sendMessage(tab.id, {
            identificador: values
        }, function(sendResponse) {
            if (sendResponse) {
                count.innerHTML = sendResponse.videoCount;
                textbox.value = sendResponse.videoList;
                textbox.select();
                document.execCommand('copy');
                textbox.blur();
            } else {
                textbox.value = 'Current page "' + tab.url + '" is not response.';
            }
        });
    });
}

И второй файл:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    var setting = request.identificador;
    var result = '';
    var resultCount = 0;
    var myName;
    var myLink;
    var mySub = false;
    try {
        var elems = document.getElementsByClassName('yt-masthead-picker-name')[0];
        myName = elems.innerHTML;
        elems = document.getElementsByClassName('guide-item')[1];
        myLink = elems.getAttribute('href');
    } catch (e) {
 
    }
    try {
        var elems = document.getElementsByClassName('yt-lockup-dismissable');
        var link_start = 'https://www.youtube.com';
        var subGet = document.getElementById('c4-primary-header-contents');
        if (subGet) {
            var res = subGet.getElementsByTagName('button')[0].getAttribute('class');
            if (res) {
                if (res != 'yt-uix-button yt-uix-button-size-default yt-uix-button-subscribe-branded yt-uix-button-has-icon no-icon-markup yt-uix-subscription-button yt-can-buffer') {
                    // mySub = true; узнать подписку
                }
            }
        }
        for (var i = 0; i < elems.length; i++) {
            var videoGet = elems[i].getElementsByTagName('a')[1];
            var title = videoGet.getAttribute('title');
            var link = videoGet.getAttribute('href');
            if (link.startsWith('/watch?v=')) {
                if (setting.watched) {
                    var watched = elems[i].getElementsByClassName('watched-badge');
                    if (watched.length > 0) {
                        var views = elems[i].getElementsByTagName('li')[2].innerHTML;
                        views = views.match(/\d+/g);
                        if (!setting.onlyURL) {
                            result += title + ' [' + views + ']\n';
                        }
                        result += 'https://www.youtube.com' + link;
                        result += '\n';
                        if (!setting.onlyURL) {
                            result += '\n';
                        }
                        resultCount++;
                    }
                } else {
                    var views = elems[i].getElementsByTagName('li')[2].innerHTML;
                    views = views.match(/\d+/g);
                    if (!setting.onlyURL) {
                        result += title + ' [' + views + ']\n';
                    }
                    result += 'https://www.youtube.com' + link;
                    result += '\n';
                    if (!setting.onlyURL) {
                        result += '\n';
                    }
                    resultCount++;
                }
 
            }
        }
        if (setting.shortURL) {
            result = result.replaceAll('https://www.youtube.com/watch?v=', 'https://youtu.be/');
        }
        if (myName != null & myLink != null & mySub) {
            if (!setting.onlyURL) {
                result += 'Подписка от: ' + myName;
            }
            result += '\n' + 'https://www.youtube.com' + myLink;
        }
        result = result.trim();
    } catch (e) {
        result = 'Error!';
    }
    sendResponse({
        videoList: result,
        videoCount: resultCount
    });
});
 
String.prototype.replaceAll = function(search, replace) {
    return this.split(search).join(replace);
}

Думаю описывать код нет смысла, он не слишком большой.
Я не знаю правильно ли таким образом работать со string в JS?

JavaScript
1
result += 'https://www.youtube.com' + link;

И наверняка так же есть какие нибудь другие методы получения списка видео чем их выдирание прям с HTML страницы?

С использованием перевода тоже не очень ясно, в AdBlock есть такая запись:

HTML5
1
<div i18n="pause_adblock" id="div_pause_adblock">Приостановить AdBlock</div>

Где pause_adblock это "ключ" из файла messages.json для определённой локализации. Но как я понял работает это не с поморью магии, а какой то JS код считывает значение этого атрибута и вписывает внутрь элементов содержание соответствующие ключу. В общем если кто знает статью как правильно реализовать поддержку нескольких языков в расширении то объяснение пожалуйста.

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

@Sn1p3rOk · 07.08.2015, 01:08

Сообщение от Skript47

В общем если кто знает статью как правильно реализовать поддержку нескольких языков в расширении то объяснение пожалуйста

Не совсем понятно. Вы имеете ввиду чтобы был выбор языка для расширения?

@BANO · 07.08.2015, 01:34

Сообщение от Skript47

только оценка кода и советы по его улучшению

код рабочий это главное
совет - поучи js ещё, там много интересных моментов, которые помогают уменьшить код,
и ещё, мы же точно знаем что работаем в webkit, тогда начерта есть команда document.execCommand('copy');, ведь это только для осла?

Добавлено через 16 минут

Сообщение от Skript47

таким образом работать со string в JS

нормально, все работают и не жалуются)

@Skript47 · 07.08.2015, 12:50 **[ТС]**

Сообщение от BANO

нормально, все работают и не жалуются)

Ну в C# это бы не работало, там для таких случаев StringBuilder и string.Join.

Сообщение от BANO

document.execCommand('copy');

Ну с копированием в браузерах вообще всё запущенно немного. Еще можно использовать такой вариант

JavaScript
1
copyToClipboard(tab.url);

Но самый первый это просто самый распространенный ответ в гугл. Гугл проиндексировал и кинул в топ статьи которые предлагают это решение.

Сообщение от Sn1p3rOk

Не совсем понятно. Вы имеете ввиду чтобы был выбор языка для расширения?

https://developer.chrome.com/extensions/i18n
В расширениях вообще то язык выбирается в зависимости от того какой указан в браузере пользователя.
В папках _locales хранятся файлы с текстом перевода (ru, en, ti...).

В manifest.json и CSS, чтобы вставить текст нужно указать его messagename в таком виде:
"description": "__MSG_messagename__" (messagename понятно ключ из файла messages.json из папки которая соответствует текущему языку)

Тогда текст описания будет выбираться из соответствующего файла с нужным языком. Ну это понятно как работает.

А в JS вот таким образом обращение к ключам:
chrome.i18n.getMessage("messagename")

Про HTML нигде ничего не сказано, видимо никакого синтаксиса для них нету и я зря его ищу. Потому я делал так:

JavaScript
1
2
3
4
var elems = document.getElementsByTagName('label');
for (var i = 0; i < elems.length; i++) {
    elems[i].innerHTML = chrome.i18n.getMessage(elems[i].getAttribute('i18n'));
}

Да и еще была проблема с при самом первом запуске значения чекбоксов запускаются позже чем происходит функция GetList, потому я заменил её на setTimeout(GetList, 400);. Не знаю с чем это было связано и порядок действий не менял.

@BANO · 07.08.2015, 13:47

Skript47, ну вообще это называется локализация
самый яркий пример это вк, там до черта локализаций

а с расширениями я, честно говоря, работал мало так что вот эти ваши getMessage я не понимаю)
а код в 4 строки можно написать и в 3

JavaScript
1
2
3
[].forEach.call(document.getElementsByTagName("lable"),function(e){
    e.innerHTML=chrome.i18n.getMessage(e.getAttribute('i18n'));
})

@Skript47 · 08.08.2015, 12:47 **[ТС]**

Сообщение от BANO

ну вообще это называется локализация

Я это и имел введу просто вдруг кому будет непонятно, просто в расширениях это реализуется через свои спец методы.

Сообщение от BANO

а с расширениями я, честно говоря, работал мало так что вот эти ваши getMessage я не понимаю)

Ну расширения тут не причем, это нормальная практика и в играх, вообще это тоже самое что Dictionary в C#.

Сообщение от BANO

а код в 4 строки можно написать и в 3

Красивая запись, видел аналогичные ранее, но конечно ожидал более жесткой критики, в том числе по сокращению форм записи, минус одна строка это как то слишком мало.

JavaScript
1
2
3
4
5
6
chrome.storage.local.get('YTlist', function(result) {
    var values = result['YTlist'];
    t1.checked = values.watched;
    t2.checked = values.onlyURL;
    t3.checked = values.shortURL;
});

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

@BANO · 17.08.2015, 16:07

Сообщение от Skript47

в первый раз выдает ошибку что запись не найдена

примерно так

JavaScript
1
2
localStorge.get(""/*тут ваш ключ*/)==undefined&&(localStorge.set(""/*ключ*/,1)) // вот только теперь придётся отслеживать,
// чтобы это значение, а точнее второй аргумент set, никак не помял ваш код

Новые блоги и статьи Все статьи Все блоги /
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.