Features of the development of Google Chrome extensions
Good day.
Initially, this post was planned as a regular tutorial for beginners. But a superficial search showed that this makes no sense. Therefore, I decided to just share with beginners and not very experience in some issues. It will be a kind of pseudo-tutorial with solutions to answers to not obvious (for some) questions.
Ideas in a post do not claim special uniqueness or novelty, but many of the questions I myself was not easy to solve at first. I hope someone my knowledge will benefit. All interested in asking under the cat.
I, being a web developer, have long been a hobby for extensions. Purely out of interest, and for solving some problems. Moreover, under Chrome, probably, they are the easiest to develop. Already "got" enough experience, because part of it decided to share with you in this post.
Chrome extensions are a collection of plain HTML pages and some additional files. Even in a popup window, a full HTML environment is provided. Therefore, the question of the possibility of using CSS and any JS frameworks disappears by itself. Can. The main thing is not to overdo it, because it will affect productivity in a similar way (especially, popup downloads).
Configuration files use full valid JSON. Be careful, for example, with trailing commas. For these same commas, the browser swears at the assembly stage of the extension, and the debug information is given crookedly. I like to write in a free style, especially I like these very commas at the end of constructions, therefore I have often suffered from the elimination of such errors.
AJAX-requests from the expansion of cross-domain domains themselves without any dancing with a tambourine (yes, many familiar developers, far from extensions, really surprised and asked about the cross-domain). You only need to register the appropriate permissions in the manifest.
By the way, with regard to the same permissions. As practice shows, depending on the complexity of the extension, either one or two addresses is enough, or it is better to immediately give access to all addresses. Especially based on the subsequent development.
I also personally came across a lot of questions about the health of extensions under different browsers on the Chromium engine. After switching to version 2 manifest, all browsers below version 18 will immediately disappear. Starting from 18 onwards, if you do not use any special API or HTML5, performance can almost be guaranteed in any way. The requirements for branded issues (for example, Yandex Internet) are the same. The same Mail.ru does not work (still pushing the 17th version).
I do not know how things are in other browsers, but in Chrome the possibility of supporting several languages is inherent in the extensions themselves, without the need to somehow explicitly specify and process the current locale. On the one hand, this is convenient, on the other - to organize manual language switching, you need to reinvent your bike.
The solution proposed by Google, though not perfect and not very convenient, but quite workable.
To support multilanguage in the source folder of the extension, you must create the _locales folder (yes, in this form, with the underscore symbol). Inside, a folder is created for each language to which a single messages.json file is added.
The content of the file is as follows:
')
Headings are chosen freely, the main thing is not to repeat. Plus, there are a couple of reserved headers. You can declare the message “appName” and “appDesc”, which will then automatically also be substituted depending on the locale in the name and description of the extension in the browser. To do this, you need to specify the following parameters in the manifest:
Also, in the case of introduction to the extension of multilanguage, the parameter “default_locale” should be declared in the manifest.
To get the value of a specific string, use the function
Initially, this post was planned as a regular tutorial for beginners. But a superficial search showed that this makes no sense. Therefore, I decided to just share with beginners and not very experience in some issues. It will be a kind of pseudo-tutorial with solutions to answers to not obvious (for some) questions.
Ideas in a post do not claim special uniqueness or novelty, but many of the questions I myself was not easy to solve at first. I hope someone my knowledge will benefit. All interested in asking under the cat.
Intro
I, being a web developer, have long been a hobby for extensions. Purely out of interest, and for solving some problems. Moreover, under Chrome, probably, they are the easiest to develop. Already "got" enough experience, because part of it decided to share with you in this post.
Frequently asked questions
Chrome extensions are a collection of plain HTML pages and some additional files. Even in a popup window, a full HTML environment is provided. Therefore, the question of the possibility of using CSS and any JS frameworks disappears by itself. Can. The main thing is not to overdo it, because it will affect productivity in a similar way (especially, popup downloads).
Configuration files use full valid JSON. Be careful, for example, with trailing commas. For these same commas, the browser swears at the assembly stage of the extension, and the debug information is given crookedly. I like to write in a free style, especially I like these very commas at the end of constructions, therefore I have often suffered from the elimination of such errors.
AJAX-requests from the expansion of cross-domain domains themselves without any dancing with a tambourine (yes, many familiar developers, far from extensions, really surprised and asked about the cross-domain). You only need to register the appropriate permissions in the manifest.
By the way, with regard to the same permissions. As practice shows, depending on the complexity of the extension, either one or two addresses is enough, or it is better to immediately give access to all addresses. Especially based on the subsequent development.
I also personally came across a lot of questions about the health of extensions under different browsers on the Chromium engine. After switching to version 2 manifest, all browsers below version 18 will immediately disappear. Starting from 18 onwards, if you do not use any special API or HTML5, performance can almost be guaranteed in any way. The requirements for branded issues (for example, Yandex Internet) are the same. The same Mail.ru does not work (still pushing the 17th version).
Multilingual
I do not know how things are in other browsers, but in Chrome the possibility of supporting several languages is inherent in the extensions themselves, without the need to somehow explicitly specify and process the current locale. On the one hand, this is convenient, on the other - to organize manual language switching, you need to reinvent your bike.
The solution proposed by Google, though not perfect and not very convenient, but quite workable.
To support multilanguage in the source folder of the extension, you must create the _locales folder (yes, in this form, with the underscore symbol). Inside, a folder is created for each language to which a single messages.json file is added.
The content of the file is as follows:
')
"title": { "message":"blah-blah-blah" }, ... Headings are chosen freely, the main thing is not to repeat. Plus, there are a couple of reserved headers. You can declare the message “appName” and “appDesc”, which will then automatically also be substituted depending on the locale in the name and description of the extension in the browser. To do this, you need to specify the following parameters in the manifest:
"name": "__MSG_appName__", "description": "__MSG_appDesc__", Also, in the case of introduction to the extension of multilanguage, the parameter “default_locale” should be declared in the manifest.
To get the value of a specific string, use the function
chrome.i18n.getMessage('');. .
function _writeMessage(a) { document.write(_getMessage(a)) } function _getMessage(a) { return (chrome.i18n.getMessage(a)) }
, - . HTML , , :
, , , . . , , , ID . . , :
var m = document.getElementsByClassName('mopts'); for (var i = 0, l = m.length; i < l; i++){ m[i].innerHTML = _getMessage(m[i].getAttribute('mid')); }
, , innerHTML title, , , querySelector ( jQuery), .
-
user-scripts. , ( ?) – CSS- JS-, - . .
. ( , ) ( URL).
"content_scripts", . .
JS--. , . DOM window ( ). API chrome.extension, .
– - script, DOM. - (, , - , - ).
( DOM, ), JS- :
var customEvent=document.createEvent('Event'); customEvent.initEvent('myevent',true,true); //... // - document.getElementById('my_gateway').innerHTML = '- '; document.getElementById('my_gateway').dispatchEvent(customEvent);
. - , DIV .
- DOM.
document.getElementById('my_gateway').addEventListener('myevent', function() { // var data = document.getElementById('my_gateway').innerHTML; // },false);
Google.
, API Chrome Webstore. , , . , - , , , . , , . , . , , ( , ). – , .
, , . . AdBlock. .
Outro
. (, , ). cookies, HTTP-, .
Chrome extensions: Getting strarted
API
( )
Chrome Web Storechrome.i18n.getMessage('');. .
function _writeMessage(a) { document.write(_getMessage(a)) } function _getMessage(a) { return (chrome.i18n.getMessage(a)) }
, - . HTML , , :
, , , . . , , , ID . . , :
var m = document.getElementsByClassName('mopts'); for (var i = 0, l = m.length; i < l; i++){ m[i].innerHTML = _getMessage(m[i].getAttribute('mid')); }
, , innerHTML title, , , querySelector ( jQuery), .
-
user-scripts. , ( ?) – CSS- JS-, - . .
. ( , ) ( URL).
"content_scripts", . .
JS--. , . DOM window ( ). API chrome.extension, .
– - script, DOM. - (, , - , - ).
( DOM, ), JS- :
var customEvent=document.createEvent('Event'); customEvent.initEvent('myevent',true,true); //... // - document.getElementById('my_gateway').innerHTML = '- '; document.getElementById('my_gateway').dispatchEvent(customEvent);
. - , DIV .
- DOM.
document.getElementById('my_gateway').addEventListener('myevent', function() { // var data = document.getElementById('my_gateway').innerHTML; // },false);
Google.
, API Chrome Webstore. , , . , - , , , . , , . , . , , ( , ). – , .
, , . . AdBlock. .
Outro
. (, , ). cookies, HTTP-, .
Chrome extensions: Getting strarted
API
( )
Chrome Web Store chrome.i18n.getMessage('');. .
function _writeMessage(a) { document.write(_getMessage(a)) } function _getMessage(a) { return (chrome.i18n.getMessage(a)) }
, - . HTML , , :
, , , . . , , , ID . . , :
var m = document.getElementsByClassName('mopts'); for (var i = 0, l = m.length; i < l; i++){ m[i].innerHTML = _getMessage(m[i].getAttribute('mid')); }
, , innerHTML title, , , querySelector ( jQuery), .
-
user-scripts. , ( ?) – CSS- JS-, - . .
. ( , ) ( URL).
"content_scripts", . .
JS--. , . DOM window ( ). API chrome.extension, .
– - script, DOM. - (, , - , - ).
( DOM, ), JS- :
var customEvent=document.createEvent('Event'); customEvent.initEvent('myevent',true,true); //... // - document.getElementById('my_gateway').innerHTML = '- '; document.getElementById('my_gateway').dispatchEvent(customEvent);
. - , DIV .
- DOM.
document.getElementById('my_gateway').addEventListener('myevent', function() { // var data = document.getElementById('my_gateway').innerHTML; // },false);
Google.
, API Chrome Webstore. , , . , - , , , . , , . , . , , ( , ). – , .
, , . . AdBlock. .
Outro
. (, , ). cookies, HTTP-, .
Chrome extensions: Getting strarted
API
( )
Chrome Web Storechrome.i18n.getMessage('');. .
function _writeMessage(a) { document.write(_getMessage(a)) } function _getMessage(a) { return (chrome.i18n.getMessage(a)) }
, - . HTML , , :
, , , . . , , , ID . . , :
var m = document.getElementsByClassName('mopts'); for (var i = 0, l = m.length; i < l; i++){ m[i].innerHTML = _getMessage(m[i].getAttribute('mid')); }
, , innerHTML title, , , querySelector ( jQuery), .
-
user-scripts. , ( ?) – CSS- JS-, - . .
. ( , ) ( URL).
"content_scripts", . .
JS--. , . DOM window ( ). API chrome.extension, .
– - script, DOM. - (, , - , - ).
( DOM, ), JS- :
var customEvent=document.createEvent('Event'); customEvent.initEvent('myevent',true,true); //... // - document.getElementById('my_gateway').innerHTML = '- '; document.getElementById('my_gateway').dispatchEvent(customEvent);
. - , DIV .
- DOM.
document.getElementById('my_gateway').addEventListener('myevent', function() { // var data = document.getElementById('my_gateway').innerHTML; // },false);
Google.
, API Chrome Webstore. , , . , - , , , . , , . , . , , ( , ). – , .
, , . . AdBlock. .
Outro
. (, , ). cookies, HTTP-, .
Chrome extensions: Getting strarted
API
( )
Chrome Web Storechrome.i18n.getMessage('');. .
function _writeMessage(a) { document.write(_getMessage(a)) } function _getMessage(a) { return (chrome.i18n.getMessage(a)) }
, - . HTML , , :
, , , . . , , , ID . . , :
var m = document.getElementsByClassName('mopts'); for (var i = 0, l = m.length; i < l; i++){ m[i].innerHTML = _getMessage(m[i].getAttribute('mid')); }
, , innerHTML title, , , querySelector ( jQuery), .
-
user-scripts. , ( ?) – CSS- JS-, - . .
. ( , ) ( URL).
"content_scripts", . .
JS--. , . DOM window ( ). API chrome.extension, .
– - script, DOM. - (, , - , - ).
( DOM, ), JS- :
var customEvent=document.createEvent('Event'); customEvent.initEvent('myevent',true,true); //... // - document.getElementById('my_gateway').innerHTML = '- '; document.getElementById('my_gateway').dispatchEvent(customEvent);
. - , DIV .
- DOM.
document.getElementById('my_gateway').addEventListener('myevent', function() { // var data = document.getElementById('my_gateway').innerHTML; // },false);
Google.
, API Chrome Webstore. , , . , - , , , . , , . , . , , ( , ). – , .
, , . . AdBlock. .
Outro
. (, , ). cookies, HTTP-, .
Chrome extensions: Getting strarted
API
( )
Chrome Web Store
chrome.i18n.getMessage('');. .
function _writeMessage(a) { document.write(_getMessage(a)) } function _getMessage(a) { return (chrome.i18n.getMessage(a)) }, - . HTML , , :
, , , . . , , , ID . . , :
var m = document.getElementsByClassName('mopts'); for (var i = 0, l = m.length; i < l; i++){ m[i].innerHTML = _getMessage(m[i].getAttribute('mid')); }, , innerHTML title, , , querySelector ( jQuery), .
-
user-scripts. , ( ?) – CSS- JS-, - . .
. ( , ) ( URL).
"content_scripts", . .
JS--. , . DOM window ( ). API chrome.extension, .
– - script, DOM. - (, , - , - ).
( DOM, ), JS- :
var customEvent=document.createEvent('Event'); customEvent.initEvent('myevent',true,true); //... // - document.getElementById('my_gateway').innerHTML = '- '; document.getElementById('my_gateway').dispatchEvent(customEvent);. - , DIV .
- DOM.
document.getElementById('my_gateway').addEventListener('myevent', function() { // var data = document.getElementById('my_gateway').innerHTML; // },false);Google.
, API Chrome Webstore. , , . , - , , , . , , . , . , , ( , ). – , .
, , . . AdBlock. .
Outro
. (, , ). cookies, HTTP-, .
Chrome extensions: Getting strarted
API
( )
Chrome Web Store
chrome.i18n.getMessage('');. .
function _writeMessage(a) { document.write(_getMessage(a)) } function _getMessage(a) { return (chrome.i18n.getMessage(a)) }
, - . HTML , , :
, , , . . , , , ID . . , :
var m = document.getElementsByClassName('mopts'); for (var i = 0, l = m.length; i < l; i++){ m[i].innerHTML = _getMessage(m[i].getAttribute('mid')); }
, , innerHTML title, , , querySelector ( jQuery), .
-
user-scripts. , ( ?) – CSS- JS-, - . .
. ( , ) ( URL).
"content_scripts", . .
JS--. , . DOM window ( ). API chrome.extension, .
– - script, DOM. - (, , - , - ).
( DOM, ), JS- :
var customEvent=document.createEvent('Event'); customEvent.initEvent('myevent',true,true); //... // - document.getElementById('my_gateway').innerHTML = '- '; document.getElementById('my_gateway').dispatchEvent(customEvent);
. - , DIV .
- DOM.
document.getElementById('my_gateway').addEventListener('myevent', function() { // var data = document.getElementById('my_gateway').innerHTML; // },false);
Google.
, API Chrome Webstore. , , . , - , , , . , , . , . , , ( , ). – , .
, , . . AdBlock. .
Outro
. (, , ). cookies, HTTP-, .
Chrome extensions: Getting strarted
API
( )
Chrome Web Store chrome.i18n.getMessage('');. .
function _writeMessage(a) { document.write(_getMessage(a)) } function _getMessage(a) { return (chrome.i18n.getMessage(a)) }
, - . HTML , , :
, , , . . , , , ID . . , :
var m = document.getElementsByClassName('mopts'); for (var i = 0, l = m.length; i < l; i++){ m[i].innerHTML = _getMessage(m[i].getAttribute('mid')); }
, , innerHTML title, , , querySelector ( jQuery), .
-
user-scripts. , ( ?) – CSS- JS-, - . .
. ( , ) ( URL).
"content_scripts", . .
JS--. , . DOM window ( ). API chrome.extension, .
– - script, DOM. - (, , - , - ).
( DOM, ), JS- :
var customEvent=document.createEvent('Event'); customEvent.initEvent('myevent',true,true); //... // - document.getElementById('my_gateway').innerHTML = '- '; document.getElementById('my_gateway').dispatchEvent(customEvent);
. - , DIV .
- DOM.
document.getElementById('my_gateway').addEventListener('myevent', function() { // var data = document.getElementById('my_gateway').innerHTML; // },false);
Google.
, API Chrome Webstore. , , . , - , , , . , , . , . , , ( , ). – , .
, , . . AdBlock. .
Outro
. (, , ). cookies, HTTP-, .
Chrome extensions: Getting strarted
API
( )
Chrome Web Storechrome.i18n.getMessage('');. .
function _writeMessage(a) { document.write(_getMessage(a)) } function _getMessage(a) { return (chrome.i18n.getMessage(a)) }
, - . HTML , , :
, , , . . , , , ID . . , :
var m = document.getElementsByClassName('mopts'); for (var i = 0, l = m.length; i < l; i++){ m[i].innerHTML = _getMessage(m[i].getAttribute('mid')); }
, , innerHTML title, , , querySelector ( jQuery), .
-
user-scripts. , ( ?) – CSS- JS-, - . .
. ( , ) ( URL).
"content_scripts", . .
JS--. , . DOM window ( ). API chrome.extension, .
– - script, DOM. - (, , - , - ).
( DOM, ), JS- :
var customEvent=document.createEvent('Event'); customEvent.initEvent('myevent',true,true); //... // - document.getElementById('my_gateway').innerHTML = '- '; document.getElementById('my_gateway').dispatchEvent(customEvent);
. - , DIV .
- DOM.
document.getElementById('my_gateway').addEventListener('myevent', function() { // var data = document.getElementById('my_gateway').innerHTML; // },false);
Google.
, API Chrome Webstore. , , . , - , , , . , , . , . , , ( , ). – , .
, , . . AdBlock. .
Outro
. (, , ). cookies, HTTP-, .
Chrome extensions: Getting strarted
API
( )
Chrome Web Store chrome.i18n.getMessage('');. .
function _writeMessage(a) { document.write(_getMessage(a)) } function _getMessage(a) { return (chrome.i18n.getMessage(a)) }
, - . HTML , , :
, , , . . , , , ID . . , :
var m = document.getElementsByClassName('mopts'); for (var i = 0, l = m.length; i < l; i++){ m[i].innerHTML = _getMessage(m[i].getAttribute('mid')); }
, , innerHTML title, , , querySelector ( jQuery), .
-
user-scripts. , ( ?) – CSS- JS-, - . .
. ( , ) ( URL).
"content_scripts", . .
JS--. , . DOM window ( ). API chrome.extension, .
– - script, DOM. - (, , - , - ).
( DOM, ), JS- :
var customEvent=document.createEvent('Event'); customEvent.initEvent('myevent',true,true); //... // - document.getElementById('my_gateway').innerHTML = '- '; document.getElementById('my_gateway').dispatchEvent(customEvent);
. - , DIV .
- DOM.
document.getElementById('my_gateway').addEventListener('myevent', function() { // var data = document.getElementById('my_gateway').innerHTML; // },false);
Google.
, API Chrome Webstore. , , . , - , , , . , , . , . , , ( , ). – , .
, , . . AdBlock. .
Outro
. (, , ). cookies, HTTP-, .
Chrome extensions: Getting strarted
API
( )
Chrome Web Storechrome.i18n.getMessage('');. .
function _writeMessage(a) { document.write(_getMessage(a)) } function _getMessage(a) { return (chrome.i18n.getMessage(a)) }
, - . HTML , , :
, , , . . , , , ID . . , :
var m = document.getElementsByClassName('mopts'); for (var i = 0, l = m.length; i < l; i++){ m[i].innerHTML = _getMessage(m[i].getAttribute('mid')); }
, , innerHTML title, , , querySelector ( jQuery), .
-
user-scripts. , ( ?) – CSS- JS-, - . .
. ( , ) ( URL).
"content_scripts", . .
JS--. , . DOM window ( ). API chrome.extension, .
– - script, DOM. - (, , - , - ).
( DOM, ), JS- :
var customEvent=document.createEvent('Event'); customEvent.initEvent('myevent',true,true); //... // - document.getElementById('my_gateway').innerHTML = '- '; document.getElementById('my_gateway').dispatchEvent(customEvent);
. - , DIV .
- DOM.
document.getElementById('my_gateway').addEventListener('myevent', function() { // var data = document.getElementById('my_gateway').innerHTML; // },false);
Google.
, API Chrome Webstore. , , . , - , , , . , , . , . , , ( , ). – , .
, , . . AdBlock. .
Outro
. (, , ). cookies, HTTP-, .
Chrome extensions: Getting strarted
API
( )
Chrome Web Storechrome.i18n.getMessage('');. .
function _writeMessage(a) { document.write(_getMessage(a)) } function _getMessage(a) { return (chrome.i18n.getMessage(a)) }
, - . HTML , , :
, , , . . , , , ID . . , :
var m = document.getElementsByClassName('mopts'); for (var i = 0, l = m.length; i < l; i++){ m[i].innerHTML = _getMessage(m[i].getAttribute('mid')); }
, , innerHTML title, , , querySelector ( jQuery), .
-
user-scripts. , ( ?) – CSS- JS-, - . .
. ( , ) ( URL).
"content_scripts", . .
JS--. , . DOM window ( ). API chrome.extension, .
– - script, DOM. - (, , - , - ).
( DOM, ), JS- :
var customEvent=document.createEvent('Event'); customEvent.initEvent('myevent',true,true); //... // - document.getElementById('my_gateway').innerHTML = '- '; document.getElementById('my_gateway').dispatchEvent(customEvent);
. - , DIV .
- DOM.
document.getElementById('my_gateway').addEventListener('myevent', function() { // var data = document.getElementById('my_gateway').innerHTML; // },false);
Google.
, API Chrome Webstore. , , . , - , , , . , , . , . , , ( , ). – , .
, , . . AdBlock. .
Outro
. (, , ). cookies, HTTP-, .
Chrome extensions: Getting strarted
API
( )
Chrome Web Store
chrome.i18n.getMessage('');. .
function _writeMessage(a) { document.write(_getMessage(a)) } function _getMessage(a) { return (chrome.i18n.getMessage(a)) }, - . HTML , , :
, , , . . , , , ID . . , :
var m = document.getElementsByClassName('mopts'); for (var i = 0, l = m.length; i < l; i++){ m[i].innerHTML = _getMessage(m[i].getAttribute('mid')); }, , innerHTML title, , , querySelector ( jQuery), .
-
user-scripts. , ( ?) – CSS- JS-, - . .
. ( , ) ( URL).
"content_scripts", . .
JS--. , . DOM window ( ). API chrome.extension, .
– - script, DOM. - (, , - , - ).
( DOM, ), JS- :
var customEvent=document.createEvent('Event'); customEvent.initEvent('myevent',true,true); //... // - document.getElementById('my_gateway').innerHTML = '- '; document.getElementById('my_gateway').dispatchEvent(customEvent);. - , DIV .
- DOM.
document.getElementById('my_gateway').addEventListener('myevent', function() { // var data = document.getElementById('my_gateway').innerHTML; // },false);Google.
, API Chrome Webstore. , , . , - , , , . , , . , . , , ( , ). – , .
, , . . AdBlock. .
Outro
. (, , ). cookies, HTTP-, .
Chrome extensions: Getting strarted
API
( )
Chrome Web Store
chrome.i18n.getMessage('');. .
function _writeMessage(a) { document.write(_getMessage(a)) } function _getMessage(a) { return (chrome.i18n.getMessage(a)) }
, - . HTML , , :
, , , . . , , , ID . . , :
var m = document.getElementsByClassName('mopts'); for (var i = 0, l = m.length; i < l; i++){ m[i].innerHTML = _getMessage(m[i].getAttribute('mid')); }
, , innerHTML title, , , querySelector ( jQuery), .
-
user-scripts. , ( ?) – CSS- JS-, - . .
. ( , ) ( URL).
"content_scripts", . .
JS--. , . DOM window ( ). API chrome.extension, .
– - script, DOM. - (, , - , - ).
( DOM, ), JS- :
var customEvent=document.createEvent('Event'); customEvent.initEvent('myevent',true,true); //... // - document.getElementById('my_gateway').innerHTML = '- '; document.getElementById('my_gateway').dispatchEvent(customEvent);
. - , DIV .
- DOM.
document.getElementById('my_gateway').addEventListener('myevent', function() { // var data = document.getElementById('my_gateway').innerHTML; // },false);
Google.
, API Chrome Webstore. , , . , - , , , . , , . , . , , ( , ). – , .
, , . . AdBlock. .
Outro
. (, , ). cookies, HTTP-, .
Chrome extensions: Getting strarted
API
( )
Chrome Web Storechrome.i18n.getMessage('');. .
function _writeMessage(a) { document.write(_getMessage(a)) } function _getMessage(a) { return (chrome.i18n.getMessage(a)) }
, - . HTML , , :
, , , . . , , , ID . . , :
var m = document.getElementsByClassName('mopts'); for (var i = 0, l = m.length; i < l; i++){ m[i].innerHTML = _getMessage(m[i].getAttribute('mid')); }
, , innerHTML title, , , querySelector ( jQuery), .
-
user-scripts. , ( ?) – CSS- JS-, - . .
. ( , ) ( URL).
"content_scripts", . .
JS--. , . DOM window ( ). API chrome.extension, .
– - script, DOM. - (, , - , - ).
( DOM, ), JS- :
var customEvent=document.createEvent('Event'); customEvent.initEvent('myevent',true,true); //... // - document.getElementById('my_gateway').innerHTML = '- '; document.getElementById('my_gateway').dispatchEvent(customEvent);
. - , DIV .
- DOM.
document.getElementById('my_gateway').addEventListener('myevent', function() { // var data = document.getElementById('my_gateway').innerHTML; // },false);
Google.
, API Chrome Webstore. , , . , - , , , . , , . , . , , ( , ). – , .
, , . . AdBlock. .
Outro
. (, , ). cookies, HTTP-, .
Chrome extensions: Getting strarted
API
( )
Chrome Web Store
chrome.i18n.getMessage('');. .
function _writeMessage(a) { document.write(_getMessage(a)) } function _getMessage(a) { return (chrome.i18n.getMessage(a)) }, - . HTML , , :
, , , . . , , , ID . . , :
var m = document.getElementsByClassName('mopts'); for (var i = 0, l = m.length; i < l; i++){ m[i].innerHTML = _getMessage(m[i].getAttribute('mid')); }, , innerHTML title, , , querySelector ( jQuery), .
-
user-scripts. , ( ?) – CSS- JS-, - . .
. ( , ) ( URL).
"content_scripts", . .
JS--. , . DOM window ( ). API chrome.extension, .
– - script, DOM. - (, , - , - ).
( DOM, ), JS- :
var customEvent=document.createEvent('Event'); customEvent.initEvent('myevent',true,true); //... // - document.getElementById('my_gateway').innerHTML = '- '; document.getElementById('my_gateway').dispatchEvent(customEvent);. - , DIV .
- DOM.
document.getElementById('my_gateway').addEventListener('myevent', function() { // var data = document.getElementById('my_gateway').innerHTML; // },false);Google.
, API Chrome Webstore. , , . , - , , , . , , . , . , , ( , ). – , .
, , . . AdBlock. .
Outro
. (, , ). cookies, HTTP-, .
Chrome extensions: Getting strarted
API
( )
Chrome Web Store
chrome.i18n.getMessage('');. .
function _writeMessage(a) { document.write(_getMessage(a)) } function _getMessage(a) { return (chrome.i18n.getMessage(a)) }
, - . HTML , , :
, , , . . , , , ID . . , :
var m = document.getElementsByClassName('mopts'); for (var i = 0, l = m.length; i < l; i++){ m[i].innerHTML = _getMessage(m[i].getAttribute('mid')); }
, , innerHTML title, , , querySelector ( jQuery), .
-
user-scripts. , ( ?) – CSS- JS-, - . .
. ( , ) ( URL).
"content_scripts", . .
JS--. , . DOM window ( ). API chrome.extension, .
– - script, DOM. - (, , - , - ).
( DOM, ), JS- :
var customEvent=document.createEvent('Event'); customEvent.initEvent('myevent',true,true); //... // - document.getElementById('my_gateway').innerHTML = '- '; document.getElementById('my_gateway').dispatchEvent(customEvent);
. - , DIV .
- DOM.
document.getElementById('my_gateway').addEventListener('myevent', function() { // var data = document.getElementById('my_gateway').innerHTML; // },false);
Google.
, API Chrome Webstore. , , . , - , , , . , , . , . , , ( , ). – , .
, , . . AdBlock. .
Outro
. (, , ). cookies, HTTP-, .
Chrome extensions: Getting strarted
API
( )
Chrome Web Storechrome.i18n.getMessage('');. .
function _writeMessage(a) { document.write(_getMessage(a)) } function _getMessage(a) { return (chrome.i18n.getMessage(a)) }
, - . HTML , , :
, , , . . , , , ID . . , :
var m = document.getElementsByClassName('mopts'); for (var i = 0, l = m.length; i < l; i++){ m[i].innerHTML = _getMessage(m[i].getAttribute('mid')); }
, , innerHTML title, , , querySelector ( jQuery), .
-
user-scripts. , ( ?) – CSS- JS-, - . .
. ( , ) ( URL).
"content_scripts", . .
JS--. , . DOM window ( ). API chrome.extension, .
– - script, DOM. - (, , - , - ).
( DOM, ), JS- :
var customEvent=document.createEvent('Event'); customEvent.initEvent('myevent',true,true); //... // - document.getElementById('my_gateway').innerHTML = '- '; document.getElementById('my_gateway').dispatchEvent(customEvent);
. - , DIV .
- DOM.
document.getElementById('my_gateway').addEventListener('myevent', function() { // var data = document.getElementById('my_gateway').innerHTML; // },false);
Google.
, API Chrome Webstore. , , . , - , , , . , , . , . , , ( , ). – , .
, , . . AdBlock. .
Outro
. (, , ). cookies, HTTP-, .
Chrome extensions: Getting strarted
API
( )
Chrome Web Store
chrome.i18n.getMessage('');. .
function _writeMessage(a) { document.write(_getMessage(a)) } function _getMessage(a) { return (chrome.i18n.getMessage(a)) }, - . HTML , , :
, , , . . , , , ID . . , :
var m = document.getElementsByClassName('mopts'); for (var i = 0, l = m.length; i < l; i++){ m[i].innerHTML = _getMessage(m[i].getAttribute('mid')); }, , innerHTML title, , , querySelector ( jQuery), .
-
user-scripts. , ( ?) – CSS- JS-, - . .
. ( , ) ( URL).
"content_scripts", . .
JS--. , . DOM window ( ). API chrome.extension, .
– - script, DOM. - (, , - , - ).
( DOM, ), JS- :
var customEvent=document.createEvent('Event'); customEvent.initEvent('myevent',true,true); //... // - document.getElementById('my_gateway').innerHTML = '- '; document.getElementById('my_gateway').dispatchEvent(customEvent);. - , DIV .
- DOM.
document.getElementById('my_gateway').addEventListener('myevent', function() { // var data = document.getElementById('my_gateway').innerHTML; // },false);Google.
, API Chrome Webstore. , , . , - , , , . , , . , . , , ( , ). – , .
, , . . AdBlock. .
Outro
. (, , ). cookies, HTTP-, .
Chrome extensions: Getting strarted
API
( )
Chrome Web Store
chrome.i18n.getMessage('');. .
function _writeMessage(a) { document.write(_getMessage(a)) } function _getMessage(a) { return (chrome.i18n.getMessage(a)) }
, - . HTML , , :
, , , . . , , , ID . . , :
var m = document.getElementsByClassName('mopts'); for (var i = 0, l = m.length; i < l; i++){ m[i].innerHTML = _getMessage(m[i].getAttribute('mid')); }
, , innerHTML title, , , querySelector ( jQuery), .
-
user-scripts. , ( ?) – CSS- JS-, - . .
. ( , ) ( URL).
"content_scripts", . .
JS--. , . DOM window ( ). API chrome.extension, .
– - script, DOM. - (, , - , - ).
( DOM, ), JS- :
var customEvent=document.createEvent('Event'); customEvent.initEvent('myevent',true,true); //... // - document.getElementById('my_gateway').innerHTML = '- '; document.getElementById('my_gateway').dispatchEvent(customEvent);
. - , DIV .
- DOM.
document.getElementById('my_gateway').addEventListener('myevent', function() { // var data = document.getElementById('my_gateway').innerHTML; // },false);
Google.
, API Chrome Webstore. , , . , - , , , . , , . , . , , ( , ). – , .
, , . . AdBlock. .
Outro
. (, , ). cookies, HTTP-, .
Chrome extensions: Getting strarted
API
( )
Chrome Web StoreSource: https://habr.com/ru/post/171491/
All Articles