Ovo je stara izmjena dokumenta!
<font inherit/inherit;;inherit;;transparent>Now a days people use browsers for a lot of different tasks like reading emails, browsing reddit, online shopping, online cloud storage, etc. Websites are presented to the user as-is, offering precisely what they have been programmed to offer. A great way to deal with this limited functionality are browser extensions.</font>
<font inherit/inherit;;inherit;;transparent>Browser extensions are</font><font inherit/inherit;;inherit;;inherit>small software modules that allow users to customize their browsers. They modify/manage the user interface, ads and cookie management, among other things. Usually, b</font><font inherit/inherit;;inherit;;inherit>rowser extensions</font><font inherit/inherit;;inherit;;inherit>add features, but</font><font inherit/inherit;;inherit;;inherit>some of them focus on removing items from a website, such as ads.</font><font inherit/inherit;;inherit;;inherit>According to Google, an extension must fulfill a single purpose that is easily definable and interpretable.</font><font inherit/inherit;;inherit;;inherit>Even if the extension has multiple features, they should all point to fulfill the specific purpose</font>
<font inherit/inherit;;inherit;;transparent>Extensions are usually a single downloadable package that is easily accessible through the current browsers’ extension marketplace (at least in Chrome, Mozilla Firefox and Microsoft Edge, the browsers that will we covered in this document). It’s downloaded and installed, meaning that the extension does not depend on the content from the web.</font>
<font inherit/inherit;;inherit;;transparent>While in development, a browser extension is a directory of different files that will later be packaged and added to the corresponding extension store. The most important file in the extension directory will always be the manifest.json file. This file describes the extension, specifies basic information about it and defines its’ basic behavior/commands. Following is an example of the manifest file for google chrome’s sample extension tutorial (a</font><font inherit/inherit;;inherit;;inherit>ll examples in this section will be following this same tutorial</font><font inherit/inherit;;inherit;;inherit>)</font><font inherit/inherit;;inherit;;inherit>:</font>
<western> <font 10pt/inherit;;inherit;;transparent>{</font><font inherit/inherit;;inherit;;transparent>“name”</font><font inherit/inherit;;inherit;;inherit>:</font><font inherit/inherit;;inherit;;inherit>“Hello Extensions”</font><font inherit/inherit;;inherit;;inherit>,</font><font inherit/inherit;;inherit;;transparent>“description”</font><font inherit/inherit;;inherit;;inherit>:</font><font inherit/inherit;;inherit;;inherit>“Base Level Extension”</font><font inherit/inherit;;inherit;;inherit>,</font><font inherit/inherit;;inherit;;transparent>“version”</font><font inherit/inherit;;inherit;;inherit>:</font><font inherit/inherit;;inherit;;inherit>“1.0”</font><font inherit/inherit;;inherit;;inherit>,</font><font inherit/inherit;;inherit;;transparent>“manifest_version”</font><font inherit/inherit;;inherit;;inherit>:</font><font inherit/inherit;;inherit;;inherit>2</font><font inherit/inherit;;inherit;;transparent>}</font> </western>
<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><font inherit/inherit;;inherit;;inherit>The icon and dropdown menu are defined in the following way:</font>
<western> <font 10pt/inherit;;inherit;;transparent>“browser_action”: {</font><font inherit/inherit;;inherit;;inherit>“default_popup”</font><font inherit/inherit;;inherit;;inherit>:</font><font inherit/inherit;;inherit;;inherit>“hello.html”</font><font inherit/inherit;;inherit;;inherit>,</font><font inherit/inherit;;inherit;;inherit>“default_icon”</font><font inherit/inherit;;inherit;;inherit>:</font><font inherit/inherit;;inherit;;inherit>“hello_extensions.png”</font><font inherit/inherit;;inherit;;inherit>}</font> </western>
<font inherit/inherit;;inherit;;transparent>As is clear here, the files hello.html and hello_extensions.png would have to be included in our extension’s file directory.</font>
<font inherit/inherit;;inherit;;transparent>It’s worthy to mention that an icon section can also be added to the manifest file. It will let the browser know which icons to use depending on the necessary size. These icons may be displayed in the extension store, in the toolbar, etc.</font>
<western> <font 10pt/inherit;;inherit;;transparent>“icons”</font><font inherit/inherit;;inherit;;inherit>:</font><font inherit/inherit;;inherit;;inherit>{</font><font inherit/inherit;;inherit;;inherit>“16”</font><font inherit/inherit;;inherit;;inherit>:</font><font inherit/inherit;;inherit;;inherit>“images/get_started16.png”</font><font inherit/inherit;;inherit;;inherit>,</font><font inherit/inherit;;inherit;;inherit>“32”</font><font inherit/inherit;;inherit;;inherit>:</font><font inherit/inherit;;inherit;;inherit>“images/get_started32.png”</font><font inherit/inherit;;inherit;;inherit>,</font><font inherit/inherit;;inherit;;inherit>“48”</font><font inherit/inherit;;inherit;;inherit>:</font><font inherit/inherit;;inherit;;inherit>“images/get_started48.png”</font><font inherit/inherit;;inherit;;inherit>,</font><font inherit/inherit;;inherit;;inherit>“128”</font><font inherit/inherit;;inherit;;inherit>:</font><font inherit/inherit;;inherit;;inherit>“images/get_started128.png”</font><font inherit/inherit;;inherit;;inherit>},</font> </western>
<font inherit/inherit;;inherit;;transparent>Since a browser extension is meant to add</font><font inherit/inherit;;inherit;;inherit>functionality</font><font inherit/inherit;;inherit;;inherit>to the browser, it often needs to know what changes are happening in the browser. This can be accomplished by adding a background script that monitors browser activity.</font><font inherit/inherit;;inherit;;inherit>The script allows the programmer to add listeners to different types of events which e</font><font inherit/inherit;;inherit;;inherit>xecute</font><font inherit/inherit;;inherit;;inherit>the specified function when the specified event occurs. Following is an example of defining a background script in the manifest file and the content of the specified background script:</font>
<font inherit/inherit;;inherit;;transparent>I</font><font inherit/inherit;;inherit;;inherit>n manifest.json:</font>
<western> <font 10pt/inherit;;inherit;;transparent>“background”</font><font inherit/inherit;;inherit;;inherit>:</font><font inherit/inherit;;inherit;;inherit>{</font><font inherit/inherit;;inherit;;inherit>“scripts”</font><font inherit/inherit;;inherit;;inherit>:</font><font inherit/inherit;;inherit;;inherit>[</font><font inherit/inherit;;inherit;;inherit>“background.js”</font><font inherit/inherit;;inherit;;inherit>],</font><font inherit/inherit;;inherit;;inherit>“persistent”</font><font inherit/inherit;;inherit;;inherit>:</font><font inherit/inherit;;inherit;;inherit>false</font><font inherit/inherit;;inherit;;inherit>},</font> </western>
<font inherit/inherit;;inherit;;transparent>I</font><font inherit/inherit;;inherit;;inherit>n background.js:</font>
<western> <font 10pt/inherit;;inherit;;transparent>chrome</font><font inherit/inherit;;inherit;;inherit>.</font><font inherit/inherit;;inherit;;inherit>runtime</font><font inherit/inherit;;inherit;;inherit>.</font><font inherit/inherit;;inherit;;inherit>onInstalled</font><font inherit/inherit;;inherit;;inherit>.</font><font inherit/inherit;;inherit;;inherit>addListener</font><font inherit/inherit;;inherit;;inherit>(</font><font inherit/inherit;;inherit;;inherit>function</font><font inherit/inherit;;inherit;;inherit>()</font><font inherit/inherit;;inherit;;inherit>{</font><font inherit/inherit;;inherit;;inherit>chrome</font><font inherit/inherit;;inherit;;inherit>.</font><font inherit/inherit;;inherit;;inherit>storage</font><font inherit/inherit;;inherit;;inherit>.</font><font inherit/inherit;;inherit;;inherit>sync</font><font inherit/inherit;;inherit;;inherit>.</font><font inherit/inherit;;inherit;;inherit>set</font><font inherit/inherit;;inherit;;inherit>({</font><font inherit/inherit;;inherit;;inherit>color</font><font inherit/inherit;;inherit;;inherit>:</font><font inherit/inherit;;inherit;;inherit>'#3aa757'</font><font inherit/inherit;;inherit;;inherit>},</font><font inherit/inherit;;inherit;;inherit>function</font><font inherit/inherit;;inherit;;inherit>()</font><font inherit/inherit;;inherit;;inherit>{</font><font inherit/inherit;;inherit;;inherit>console</font><font inherit/inherit;;inherit;;inherit>.</font><font inherit/inherit;;inherit;;inherit>log</font><font inherit/inherit;;inherit;;inherit>(</font><font inherit/inherit;;inherit;;inherit>“The color is green.”</font><font inherit/inherit;;inherit;;inherit>);</font><font inherit/inherit;;inherit;;inherit>});</font><font inherit/inherit;;inherit;;inherit>});</font> </western>
<font inherit/inherit;;inherit;;transparent>F</font><font inherit/inherit;;inherit;;inherit>ig 1</font>
<font inherit/inherit;;inherit;;transparent>C</font><font inherit/inherit;;inherit;;inherit>hrome has various APIs (</font>https://developer.chrome.com/extensions/api_index <font inherit/inherit;;inherit;;inherit>) available that can be called from the extensions (like storage in this previous example, which allows different extensions to access the same information). These APIs are incredibly useful because they allow the extension to manage many different aspects of the browser. It’s important to note that each API used in the background script have to be given permission to funcion in the manifest file. For example, if the extension needs access to the declarativeContent and storage APIs, the following line will have to be place somewhere in the manifest fle..</font>
<western> <font 10pt/inherit;;inherit;;transparent>“permissions”</font><font inherit/inherit;;inherit;;inherit>:</font><font inherit/inherit;;inherit;;inherit>[</font><font inherit/inherit;;inherit;;inherit>“declarativeContent”</font><font inherit/inherit;;inherit;;inherit>,</font><font inherit/inherit;;inherit;;inherit>“storage”</font><font inherit/inherit;;inherit;;inherit>],</font></western>
<font inherit/inherit;;inherit;;transparent>Some of the most common and necessary APIs include storage, declarativeContent, activeTab, history, notifications.</font>
<font inherit/inherit;;inherit;;transparent>Another important piece of an extension are it’s options. Sometimes a user may want to curtomixe the extension a bit, which is why extension options exist. Like with most these extension modules, the options files need to be defined in the manifest file and they need to include an .html file for the formatting and a .js file for the behavior.</font>
<font inherit/inherit;;inherit;;transparent>In manifest.json:</font>
<western> <font 10pt/inherit;;inherit;;transparent>“options_page”</font><font inherit/inherit;;inherit;;inherit>:</font><font inherit/inherit;;inherit;;inherit>“options.html”</font><font inherit/inherit;;inherit;;inherit>,</font></western>
<font inherit/inherit;;inherit;;transparent>In options.html:</font>
<western>
<font 10pt/inherit;;inherit;;transparent><!DOCTYPE html></font><font inherit/inherit;;inherit;;inherit></font><font inherit/inherit;;inherit;;inherit><head></font><font inherit/inherit;;inherit;;inherit><style></font><font inherit/inherit;;inherit;;inherit>button</font><font inherit/inherit;;inherit;;inherit>{</font><font inherit/inherit;;inherit;;inherit>height</font><font inherit/inherit;;inherit;;inherit>:</font><font inherit/inherit;;inherit;;inherit>30px</font><font inherit/inherit;;inherit;;inherit>;</font><font inherit/inherit;;inherit;;inherit>width</font><font inherit/inherit;;inherit;;inherit>:</font><font inherit/inherit;;inherit;;inherit>30px</font><font inherit/inherit;;inherit;;inherit>;</font><font inherit/inherit;;inherit;;inherit>outline</font><font inherit/inherit;;inherit;;inherit>:</font><font inherit/inherit;;inherit;;inherit>none</font><font inherit/inherit;;inherit;;inherit>;</font><font inherit/inherit;;inherit;;inherit>margin</font><font inherit/inherit;;inherit;;inherit>:</font><font inherit/inherit;;inherit;;inherit>10px</font><font inherit/inherit;;inherit;;inherit>;</font><font inherit/inherit;;inherit;;inherit>}</font><font inherit/inherit;;inherit;;inherit></style></font><font inherit/inherit;;inherit;;inherit></head></font><font inherit/inherit;;inherit;;inherit><body></font><font inherit/inherit;;inherit;;inherit><div</font><font inherit/inherit;;inherit;;inherit>id</font><font inherit/inherit;;inherit;;inherit>=</font><font inherit/inherit;;inherit;;inherit>"buttonDiv"</font><font inherit/inherit;;inherit;;inherit>></font><font inherit/inherit;;inherit;;inherit></div></font><font inherit/inherit;;inherit;;inherit><div></font><font inherit/inherit;;inherit;;inherit><p></font><font inherit/inherit;;inherit;;inherit>Choose a different background color!</font><font inherit/inherit;;inherit;;inherit></p></font><font inherit/inherit;;inherit;;inherit></div></font><font inherit/inherit;;inherit;;inherit></body></font><font inherit/inherit;;inherit;;inherit><script</font><font inherit/inherit;;inherit;;inherit>src</font><font inherit/inherit;;inherit;;inherit>=</font><font inherit/inherit;;inherit;;inherit>"options.js"</font><font inherit/inherit;;inherit;;inherit>></script></font><font inherit/inherit;;inherit;;inherit>
</font></western>
<font inherit/inherit;;inherit;;transparent>In options.js:</font>
<western> <font 10pt/inherit;;inherit;;transparent>let page</font><font inherit/inherit;;inherit;;inherit>=</font><font inherit/inherit;;inherit;;inherit>document</font><font inherit/inherit;;inherit;;inherit>.</font><font inherit/inherit;;inherit;;inherit>getElementById</font><font inherit/inherit;;inherit;;inherit>(</font><font inherit/inherit;;inherit;;inherit>'buttonDiv'</font><font inherit/inherit;;inherit;;inherit>);</font><font inherit/inherit;;inherit;;inherit>const</font><font inherit/inherit;;inherit;;inherit>kButtonColors</font><font inherit/inherit;;inherit;;inherit>=</font><font inherit/inherit;;inherit;;inherit>[</font><font inherit/inherit;;inherit;;inherit>'#3aa757'</font><font inherit/inherit;;inherit;;inherit>,</font><font inherit/inherit;;inherit;;inherit>'#e8453c'</font><font inherit/inherit;;inherit;;inherit>,</font><font inherit/inherit;;inherit;;inherit>'#f9bb2d'</font><font inherit/inherit;;inherit;;inherit>,</font><font inherit/inherit;;inherit;;inherit>'#4688f1'</font><font inherit/inherit;;inherit;;inherit>];</font><font inherit/inherit;;inherit;;inherit>function</font><font inherit/inherit;;inherit;;inherit>constructOptions</font><font inherit/inherit;;inherit;;inherit>(</font><font inherit/inherit;;inherit;;inherit>kButtonColors</font><font inherit/inherit;;inherit;;inherit>)</font><font inherit/inherit;;inherit;;inherit>{</font><font inherit/inherit;;inherit;;inherit>for</font><font inherit/inherit;;inherit;;inherit>(</font><font inherit/inherit;;inherit;;inherit>let item of kButtonColors</font><font inherit/inherit;;inherit;;inherit>)</font><font inherit/inherit;;inherit;;inherit>{</font><font inherit/inherit;;inherit;;inherit>let button</font><font inherit/inherit;;inherit;;inherit>=</font><font inherit/inherit;;inherit;;inherit>document</font><font inherit/inherit;;inherit;;inherit>.</font><font inherit/inherit;;inherit;;inherit>createElement</font><font inherit/inherit;;inherit;;inherit>(</font><font inherit/inherit;;inherit;;inherit>'button'</font><font inherit/inherit;;inherit;;inherit>);</font><font inherit/inherit;;inherit;;inherit>button</font><font inherit/inherit;;inherit;;inherit>.</font><font inherit/inherit;;inherit;;inherit>style</font><font inherit/inherit;;inherit;;inherit>.</font><font inherit/inherit;;inherit;;inherit>backgroundColor</font><font inherit/inherit;;inherit;;inherit>=</font><font inherit/inherit;;inherit;;inherit>item</font><font inherit/inherit;;inherit;;inherit>;</font><font inherit/inherit;;inherit;;inherit>button</font><font inherit/inherit;;inherit;;inherit>.</font><font inherit/inherit;;inherit;;inherit>addEventListener</font><font inherit/inherit;;inherit;;inherit>(</font><font inherit/inherit;;inherit;;inherit>'click'</font><font inherit/inherit;;inherit;;inherit>,</font><font inherit/inherit;;inherit;;inherit>function</font><font inherit/inherit;;inherit;;inherit>()</font><font inherit/inherit;;inherit;;inherit>{</font><font inherit/inherit;;inherit;;inherit>chrome</font><font inherit/inherit;;inherit;;inherit>.</font><font inherit/inherit;;inherit;;inherit>storage</font><font inherit/inherit;;inherit;;inherit>.</font><font inherit/inherit;;inherit;;inherit>sync</font><font inherit/inherit;;inherit;;inherit>.</font><font inherit/inherit;;inherit;;inherit>set</font><font inherit/inherit;;inherit;;inherit>({</font><font inherit/inherit;;inherit;;inherit>color</font><font inherit/inherit;;inherit;;inherit>:</font><font inherit/inherit;;inherit;;inherit>item</font><font inherit/inherit;;inherit;;inherit>},</font><font inherit/inherit;;inherit;;inherit>function</font><font inherit/inherit;;inherit;;inherit>()</font><font inherit/inherit;;inherit;;inherit>{</font><font inherit/inherit;;inherit;;inherit>console</font><font inherit/inherit;;inherit;;inherit>.</font><font inherit/inherit;;inherit;;inherit>log</font><font inherit/inherit;;inherit;;inherit>(</font><font inherit/inherit;;inherit;;inherit>'color is '</font><font inherit/inherit;;inherit;;inherit>+</font><font inherit/inherit;;inherit;;inherit>item</font><font inherit/inherit;;inherit;;inherit>);</font><font inherit/inherit;;inherit;;inherit>})</font><font inherit/inherit;;inherit;;inherit>});</font><font inherit/inherit;;inherit;;inherit>page</font><font inherit/inherit;;inherit;;inherit>.</font><font inherit/inherit;;inherit;;inherit>appendChild</font><font inherit/inherit;;inherit;;inherit>(</font><font inherit/inherit;;inherit;;inherit>button</font><font inherit/inherit;;inherit;;inherit>);</font><font inherit/inherit;;inherit;;inherit>}</font><font inherit/inherit;;inherit;;inherit>}</font><font inherit/inherit;;inherit;;inherit>constructOptions</font><font inherit/inherit;;inherit;;inherit>(</font><font inherit/inherit;;inherit;;inherit>kButtonColors</font><font inherit/inherit;;inherit;;inherit>);</font> </western>
<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>Mozilla Firefox and</font><font inherit/inherit;;inherit;;inherit>Microsoft Edge also use the same system that</font><font inherit/inherit;;inherit;;inherit>Google Chrome</font><font inherit/inherit;;inherit;;inherit>use</font><font inherit/inherit;;inherit;;inherit>s for it’s extensions.</font><font inherit/inherit;;inherit;;inherit>They’re all based on the manifest.json format.</font>
<font inherit/inherit;;inherit;;transparent></font>
<font inherit/inherit;;inherit;;transparent>F</font><font inherit/inherit;;inherit;;inherit>ig 2</font>
<font inherit/inherit;;inherit;;transparent>T</font><font inherit/inherit;;inherit;;inherit>he fact that a developer can program an extension for one browser and easily install it on other browsers makes extensions incredibly portable and reusable.</font>
<font inherit/inherit;;inherit;;transparent>The first place where a user will search for an extension is the extension store. All of the main browsers have their own extension stores that can be accessed through the browser options or settings or by using a search engine to find the extension store. In order to install an extension, it’s enough to click on the “Add to x” (x being the browser name) and the extension will automatically install itself and start working automatically.</font>
<font inherit/inherit;;inherit;;transparent></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>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> <font inherit/inherit;;inherit;;inherit>modify</font> <font inherit/inherit;;inherit;;inherit>a</font> <font inherit/inherit;;inherit;;inherit>harmless extension that has been accepted into the extension store and program it so that it</font> <font inherit/inherit;;inherit;;inherit>saves credit card numbers or informs the hacker of the pages visited by the user, etc.</font> <font inherit/inherit;;inherit;;inherit></font>
<font inherit/inherit;;inherit;;transparent>There are also some reports of companies buying existing extensions and turning them into adware or malware.</font> <font inherit/inherit;;inherit;;inherit>This was first reported with the extension “Add to Feedly”, where the developer sold his extension for 4 figures and then the buyers turned it into an adware extension. This also happened with the extension “Tweet this page”.</font>
<font inherit/inherit;;inherit;;transparent>Because of this, browser and extension users have to remember to stay on the lookout and read up on any extensions before they install them.</font>
https://en.wikipedia.org/wiki/Browser_extension
https://www.forbes.com/sites/adrianbridgwater/2019/04/16/how-browser-extensions-work/
https://developer.chrome.com/extensions
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions
https://docs.microsoft.com/en-us/microsoft-edge/extensions/
https://developer.chrome.com/extensions/api_index
<font inherit/inherit;;inherit;;transparent>Images:</font>
https://developer.chrome.com/extensions/overview (fig 1)
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension (fig 2)