| Starije izmjene na obje strane
Starija izmjena
Novija izmjena
|
Starija izmjena
|
racfor_wiki:browser:browser_extensions [2020/01/09 20:26]
ascher |
racfor_wiki:browser:browser_extensions [2024/12/05 12:24] (trenutno)
|
| |
| <code> | <code> |
| <font 10pt/inherit;;inherit;;transparent>{</font><font inherit/inherit;;inherit;;transparent>"name"</font>:"Hello Extensions", | { |
| <font inherit/inherit;;inherit;;transparent>"description"</font>:"Base Level Extension", | "name":"Hello Extensions", |
| <font inherit/inherit;;inherit;;transparent>"version"</font>:"1.0", | "description":"Base Level Extension", |
| <font inherit/inherit;;inherit;;transparent>"manifest_version"</font>:2<font inherit/inherit;;inherit;;transparent>}</font></code> | "version":"1.0", |
| | "manifest_version":2 |
| | } |
| | </code> |
| |
| <font inherit/inherit;;inherit;;transparent>Most extensions also have an icon displayed in the top bar of the browser that when clicked, will display a drop down menu displaying some information and/or settings. Lots of times there will also be a link directing the user to extension website, which the creator of the extension would’ve had to create previously (meaning it’s not part of the extension).</font>The icon and dropdown menu are defined in the following way: | <font inherit/inherit;;inherit;;transparent>Most extensions also have an icon displayed in the top bar of the browser that when clicked, will display a drop down menu displaying some information and/or settings. Lots of times there will also be a link directing the user to extension website, which the creator of the extension would’ve had to create previously (meaning it’s not part of the extension).</font>The icon and dropdown menu are defined in the following way: |
| |
| <code> | <code> |
| <font 10pt/inherit;;inherit;;inherit><!DOCTYPE html> | <!DOCTYPE html> |
| <html></font><head> | <html> |
| <style>button{height:30px;width:30px;outline:none;margin:10px;}</style> | <head> |
| </head> | <style>button{height:30px;width:30px;outline:none;margin:10px;}</style> |
| <body> | </head> |
| <divid="buttonDiv"<font inherit/inheritinherit;inherit>></font><font inherit/inherit;;inherit;;inherit></div></font><div><p>Choose a different background color!</p></div> | <body> |
| </body> | <div id="buttonDiv"></div> |
| <script src="options.js"></script> | <div><p>Choose a different background color!</p></div> |
| <font inherit/inheritinherit;inherit>></script></font><font inherit/inherit;;inherit;;inherit></html></font></code> | </body> |
| | <script src="options.js"></script> |
| | </html> |
| | </code> |
| |
| <font inherit/inherit;;inherit;;transparent>In options.js:</font> | <font inherit/inherit;;inherit;;transparent>In options.js:</font> |
| |
| <western> <font 10pt/inherit;;inherit;;transparent>let page</font>=document.getElementById('buttonDiv');constkButtonColors=['#3aa757','#e8453c','#f9bb2d','#4688f1'];functionconstructOptions(kButtonColors){for(let item of kButtonColors){let button=document.createElement('button');button.style.backgroundColor=item;button.addEventListener('click',function(){chrome.storage.sync.set({color:item},function(){console.log('color is '+item);})});page.appendChild(button);}}constructOptions(kButtonColors); </western> | <code> |
| | let page = document.getElementById('buttonDiv'); |
| | const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1']; |
| | function constructOptions(kButtonColors) { |
| | for (let item of kButtonColors) { |
| | let button = document.createElement('button'); |
| | button.style.backgroundColor = item; |
| | button.addEventListener('click', function() { |
| | chrome.storage.sync.set({color: item}, function() { |
| | console.log('color is ' + item); |
| | }) |
| | }); |
| | page.appendChild(button); |
| | } |
| | } |
| | constructOptions(kButtonColors); |
| | </code> |
| |
| <font inherit/inherit;;inherit;;transparent>These are just the bare basics as to how to create an extension for Google Chrome. The possible extensions that can be created from here are endless.</font> | <font inherit/inherit;;inherit;;transparent>These are just the bare basics as to how to create an extension for Google Chrome. The possible extensions that can be created from here are endless.</font> |
| |
| ==== O ther browser extensions ==== | ==== Other browser extensions ==== |
| |
| <font inherit/inherit;;inherit;;transparent>Mozilla Firefox and</font>Microsoft Edge also use the same system thatGoogle Chromeuses for it’s extensions.They’re all based on the manifest.json format. | <font inherit/inherit;;inherit;;transparent>Mozilla Firefox and</font>Microsoft Edge also use the same system thatGoogle Chromeuses for it’s extensions.They’re all based on the manifest.json format. |
| | |
| | {{https://mdn.mozillademos.org/files/13669/webextension-anatomy.png?nolink&600x600}} |
| |
| <font inherit/inherit;;inherit;;transparent>F</font>ig 2 | <font inherit/inherit;;inherit;;transparent>F</font>ig 2 |
| === Extension approval for the extension store === | === Extension approval for the extension store === |
| |
| === Once a developer has created an extension, he would logically like to have it published on the extension store so that users can install it onto their browser and start using it. In order for an extension to get accepted into the extension store it has to pass a couple of steps. Foll owing are Chrome’s stepsto submit an extension to the extension web store: === | Once a developer has created an extension, he would logically like to have it published on the extension store so that users can install it onto their browser and start using it. In order for an extension to get accepted into the extension store it has to pass a couple of steps. Following are Chrome’s steps to submit an extension to the extension web store: |
| | |
| - | |
| | |
| <font inherit/inherit;;inherit;;transparent>Create your app’s zip file</font> | |
| | |
| - | |
| | |
| <font inherit/inherit;;inherit;;transparent>Create a developer account</font> | |
| | |
| - | |
| | |
| <font inherit/inherit;;inherit;;transparent>Upload your app</font> | |
| | |
| - | |
| | |
| <font inherit/inherit;;inherit;;transparent>Pick a payments system</font> | |
| | |
| - | |
| | |
| <font inherit/inherit;;inherit;;transparent>Get app constraints and finish your app’s code</font> | |
| | |
| - | |
| | |
| <font inherit/inherit;;inherit;;transparent>Get the app ID</font> | |
| | |
| - | |
| | |
| <font inherit/inherit;;inherit;;transparent>Get the OAuth token</font> | |
| | |
| - | |
| | |
| <font inherit/inherit;;inherit;;transparent>Finish the app</font> | |
| | |
| - | |
| | |
| <font inherit/inherit;;inherit;;transparent>Provide store content</font> | |
| | |
| - | |
| | |
| <font inherit/inherit;;inherit;;transparent>Pay the developer signup fee</font> | |
| | |
| - | |
| |
| <font inherit/inherit;;inherit;;transparent>Publish your app</font> | - <font inherit/inherit;;inherit;;transparent>Create your app’s zip file</font> |
| | - <font inherit/inherit;;inherit;;transparent>Create a developer account</font> |
| | - <font inherit/inherit;;inherit;;transparent>Upload your app</font> |
| | - <font inherit/inherit;;inherit;;transparent>Pick a payments system</font> |
| | - <font inherit/inherit;;inherit;;transparent>Get app constraints and finish your app’s code</font> |
| | - <font inherit/inherit;;inherit;;transparent>Get the app ID</font> |
| | - <font inherit/inherit;;inherit;;transparent>Get the OAuth token</font> |
| | - <font inherit/inherit;;inherit;;transparent>Finish the app</font> |
| | - <font inherit/inherit;;inherit;;transparent>Provide store content</font> |
| | - <font inherit/inherit;;inherit;;transparent>Pay the developer signup fee</font> |
| | - <font inherit/inherit;;inherit;;transparent>Publish your app</font> |
| |
| <font inherit/inherit;;inherit;;transparent>Other browsers have similar procedures. One the extension is approved by the extension store moderators it will become available to the general public.</font> | <font inherit/inherit;;inherit;;transparent>Other browsers have similar procedures. One the extension is approved by the extension store moderators it will become available to the general public.</font> |
| |
| ==== M alware in Extensions ==== | ==== Malware in Extensions ==== |
| |
| <font inherit/inherit;;inherit;;transparent>The amount of permissions and abilities that are granted to extensions is a huge opportunity for hackers to exploit extensions. Extensions have access to browser history, current page information, usernames and passwords, etc. all of these very valuable to hackers. It would be relatively easy to</font>modify a harmless extension that has been accepted into the extension store and program it so that it saves credit card numbers or informs the hacker of the pages visited by the user, etc. | <font inherit/inherit;;inherit;;transparent>The amount of permissions and abilities that are granted to extensions is a huge opportunity for hackers to exploit extensions. Extensions have access to browser history, current page information, usernames and passwords, etc. all of these very valuable to hackers. It would be relatively easy to</font>modify a harmless extension that has been accepted into the extension store and program it so that it saves credit card numbers or informs the hacker of the pages visited by the user, etc. |
| [[https://arstechnica.com/information-technology/2014/01/malware-vendors-buy-chrome-extensions-to-send-adware-filled-updates/|https://arstechnica.com/information-technology/2014/01/malware-vendors-buy-chrome-extensions-to-send-adware-filled-updates/]] | [[https://arstechnica.com/information-technology/2014/01/malware-vendors-buy-chrome-extensions-to-send-adware-filled-updates/|https://arstechnica.com/information-technology/2014/01/malware-vendors-buy-chrome-extensions-to-send-adware-filled-updates/]] |
| |
| <font inherit/inherit;;inherit;;transparent>Images:</font> | <font inherit/inherit;;inherit;;transparent>**Images**:</font> |
| |
| [[https://developer.chrome.com/extensions/overview|https://developer.chrome.com/extensions/overview]] (fig 1) | [[https://developer.chrome.com/extensions/overview|https://developer.chrome.com/extensions/overview]] (fig 1) |
