Create your own extension for Google Chrome
On Habré there are already several articles about creating extensions for chrome, I will share my experience, touching on the main things and places in which I had difficulties.
What you need to create an extension in two words:
1) Basic knowledge of Javascript
2) Basic HTML knowledge
3) 5 $
Let me show you how to create an extension for chromium using the example of your own, which was created to calculate “lost time” on the Internet. That is, this extension considers the time spent on sites with the ability to determine the visited sites by category: useful time or lost time.
So, I start creating an extension by creating the folder for the extension itself, into which we will put all the files we create. Call it "losttime." Next, I create the file manifest.json, it looks like this:
manifest.json
')
Some of the lines should be intuitive, but be sure to know:
- The value of manifest_version must be "2";
- In the content_scripts we write which script will be run on all pages separately;
- In the background we write a general script (background script) that starts when the browser starts;
- In permissions we write the address of the site from which information will be taken.
Everything that I will use, it is not necessary to use you, if you just do not need it by logic. Read more about the manifest .
The window you can see by clicking on the extension icon is the page: popup.html.
I have it as follows:
popup.html
To make it clearer, the description of the code is inserted in the HTML itself. I organize the menu simply: on the picture I put the internal link of the extension.
Since I started about popup.html, I’ll tell you about popup.js right away.
It looks very simple for me:
popup.js
The code description is also pasted.
The design described above allows you to pull out and display content from your, and maybe not from your site. But what is important to know:
- In the manifest file it is necessary in the permissions field to write the address of the site from which information will be taken.
- The popup.js file is associated with the background.js background script, since data stored in the local storage on background.js is also visible on popup.js.
Before looking at the background.js background script file, consider the script file that runs on each page separately: content.js
It looks like this for me:
content.js
The most interesting moment from my script, I believe, should be:
Here, the background message is sent to the script, namely two variables: site: sait - contains the address of the site where the script is
time: localStorage [sait] - the amount of time spent on this script.
Next, consider the background script background.js, where the data is received, or rather, consider the data reception function itself.
background.js
Here, actually, and she. I will not discuss in detail anything, because This is basically not necessary. It is enough to know a clear example to carry out our plans. If in the background.js script you add any data to the local storage (as well as cookies, web sql), then the same data can be used in the popup.js script.
That's actually all that I wanted to tell about the creation of the extension, but I will touch on another point in which I had difficulties.
On the settings page I needed to organize drag and drop sites in different columns.
Because data is inserted via InnerHtml, then this feature will not appear just like that. Here is what had to be organized:
instead of the usual:
I think no need to explain. You can read more on the link
Extension testing
Go to Settings - Tools - Extensions, click on "Download unpacked extension"
Post extension
We go to the page pay $ 5, publish.
I do not dwell on the moments with which I did not have difficulties. And difficulties arose when paying by card:
- In my case should be connected 3d password.
If you write an error when paying, call your bank and find out. I was helped in a minute and all good.
Sources:
Documentation
About sending messages
About the manifest
Javascript forum
And also the very widening
.
Thanks for reading. Good luck to all.
What you need to create an extension in two words:
1) Basic knowledge of Javascript
2) Basic HTML knowledge
3) 5 $
Let me show you how to create an extension for chromium using the example of your own, which was created to calculate “lost time” on the Internet. That is, this extension considers the time spent on sites with the ability to determine the visited sites by category: useful time or lost time.
So, I start creating an extension by creating the folder for the extension itself, into which we will put all the files we create. Call it "losttime." Next, I create the file manifest.json, it looks like this:
manifest.json
{ "manifest_version": 2, "name": "Lost Time", "version": "1.0", "icons": { "128": "" }, "content_scripts": [ { "matches": [ "*://*/*" ], "js": [ "content.js" ] } ], "background": { "scripts": ["background.js"] }, "permissions": [ "http://losttime.su/*" ], "browser_action": { "default_title": "LostTime", "default_icon": "", "default_popup": "popup.html" } } ')
Some of the lines should be intuitive, but be sure to know:
- The value of manifest_version must be "2";
- In the content_scripts we write which script will be run on all pages separately;
- In the background we write a general script (background script) that starts when the browser starts;
- In permissions we write the address of the site from which information will be taken.
Everything that I will use, it is not necessary to use you, if you just do not need it by logic. Read more about the manifest .
The window you can see by clicking on the extension icon is the page: popup.html.
I have it as follows:
popup.html
<!doctype html> <html> <head> <title> LostTime</title> <script src="jquery.js" type="text/javascript"></script> <!-- jquery --> <link href="css.css" rel="stylesheet" type="text/css"/><!-- --> </head> <body> <div id="options"><!-- --> <a href="/popup.html"><img class='img' src="" Title = " "></a> <a href="/options.html"><img class='img' src="images/options.png" Title=" "></a> <a href="/stat.html"><img class='img' src="images/stat.png" Title=" "></a> </div> <div id="dannie"></div> <!-- , --> <script src="popup.js"></script><!-- , --> </body> </html> To make it clearer, the description of the code is inserted in the HTML itself. I organize the menu simply: on the picture I put the internal link of the extension.
Since I started about popup.html, I’ll tell you about popup.js right away.
It looks very simple for me:
popup.js
var xhr = new XMLHttpRequest(); xhr.open("GET", "http://losttime.su/?tmpl=login&token="+localStorage['lostlogin'], true); // xhr.onreadystatechange = function() { if (xhr.readyState == 4) // , , { var dannie = document.getElementById('dannie'); dannie.innerHTML = xhr.responseText; // id=dannie } } xhr.send(); The code description is also pasted.
The design described above allows you to pull out and display content from your, and maybe not from your site. But what is important to know:
- In the manifest file it is necessary in the permissions field to write the address of the site from which information will be taken.
- The popup.js file is associated with the background.js background script, since data stored in the local storage on background.js is also visible on popup.js.
Before looking at the background.js background script file, consider the script file that runs on each page separately: content.js
It looks like this for me:
content.js
function onBlur() { // chrome.runtime.sendMessage({site:sait,time:localStorage[sait]}); // background.js localStorage[sait] = '0'; } window.onblur = onBlur; // function sec() // { if(document.webkitVisibilityState == 'visible')// { localStorage[sait] = parseInt(localStorage[sait],10) +1; // } } var sait=location.hostname; // localStorage[sait] = '0'; setInterval(sec, 1000);// The most interesting moment from my script, I believe, should be:
chrome.runtime.sendMessage({site:sait,time:localStorage[sait]});Here, the background message is sent to the script, namely two variables: site: sait - contains the address of the site where the script is
time: localStorage [sait] - the amount of time spent on this script.
Next, consider the background script background.js, where the data is received, or rather, consider the data reception function itself.
background.js
chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) { var a = request.site; // var b = request.time; // // . }); Here, actually, and she. I will not discuss in detail anything, because This is basically not necessary. It is enough to know a clear example to carry out our plans. If in the background.js script you add any data to the local storage (as well as cookies, web sql), then the same data can be used in the popup.js script.
That's actually all that I wanted to tell about the creation of the extension, but I will touch on another point in which I had difficulties.
On the settings page I needed to organize drag and drop sites in different columns.
Because data is inserted via InnerHtml, then this feature will not appear just like that. Here is what had to be organized:
$('#dannie').on('mouseover', '.sait', function( ) { $(this).css({'border':'3px solid #ffffff'}); }); $('#dannie').on('mouseout', '.sait', function( ) { $(this).css({'border':'3px solid black'}); }); $('#dannie').on('mousedown', '.sait', function( ) { $(this).css({'border':'3px solid black'}); }); $('#dannie').on('mouseover', '.sait', function( ) { $('.sait').draggable({ helper:'clone' }); }); instead of the usual:
$('.sait').mouseover(function(){ $('#'+this.id).css({'border':'3px solid #ffffff'}); }); $('.sait').mouseout(function(){ $('#'+this.id).css({'border':'3px solid black'}); }); $('.sait').mousedown(function(){ $('#'+this.id).css({'border':'0px solid black'}); }); $('.sait').draggable( { helper:'clone', }); I think no need to explain. You can read more on the link
Extension testing
Go to Settings - Tools - Extensions, click on "Download unpacked extension"
Post extension
We go to the page pay $ 5, publish.
I do not dwell on the moments with which I did not have difficulties. And difficulties arose when paying by card:
- In my case should be connected 3d password.
If you write an error when paying, call your bank and find out. I was helped in a minute and all good.
Sources:
Documentation
About sending messages
About the manifest
Javascript forum
And also the very widening
.Thanks for reading. Good luck to all.
Source: https://habr.com/ru/post/198652/
All Articles