Razlike

Slijede razlike između dviju inačica stranice.

--- racfor_wiki:browser:browser_extensions [2020/01/09 20:21]
ascher
+++ racfor_wiki:browser:browser_extensions [2024/12/05 12:24] (trenutno)
@@ Redak 13: / Redak 13: @@
 <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>ll examples in this section will be following this same tutorial):
-<western> <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",<font inherit/inherit;;inherit;;transparent>"version"</font>:"1.0",<font inherit/inherit;;inherit;;transparent>"manifest_version"</font>:2<font inherit/inherit;;inherit;;transparent>}</font></western>
+<code>
+{
+"name":"Hello Extensions",
+"description":"Base Level Extension",
+"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:
 <code>
-<font 10pt/inherit;;inherit;;transparent>"browser_action": {</font>"default_popup":"hello.html","default_icon":"hello_extensions.png"}
+"browser_action": {"default_popup":"hello.html","default_icon":"hello_extensions.png"}
 </code>
@@ Redak 26: / Redak 33: @@
 <code>
-<font 10pt/inherit;;inherit;;transparent>"icons"</font>:{
+"icons":{
  "16":"images/get_started16.png",
  "32":"images/get_started32.png",
@@ Redak 39: / Redak 46: @@
 <code>
-<font 10pt/inherit;;inherit;;transparent>"background"</font>:{"scripts":["background.js"],"persistent":false},
+"background":{"scripts":["background.js"],"persistent":false},
 </code>
@@ Redak 45: / Redak 52: @@
 <code>
-<font inherit/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 10pt/ ;;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>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>});</font><font inherit/inherit;;inherit;;inherit>});</font></code>
+  chrome.runtime.onInstalled.addListener(function() {
+    chrome.storage.sync.set({color: '#3aa757'}, function() {
+      console.log("The color is green.");
+    });
+  });
+</code>
-{{https://developer.chrome.com/static/images/overview/popuparc.png?nolink&325x316}}
+{{https://developer.chrome.com/static/images/overview/popuparc.png?nolink&325x316}} <font inherit/inherit;;inherit;;transparent>F</font>ig 1
-<font inherit/inherit;;inherit;;transparent>F</font>ig 1
 <font inherit/inherit;;inherit;;transparent>C</font>hrome has various [[https://developer.chrome.com/extensions/api_index|APIs]] 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..<code>
-<font 10pt/inherit;;inherit;;transparent>"permissions"</font>:["declarativeContent","storage"],
+"permissions":["declarativeContent","storage"],
 </code>
 <font inherit/inherit;;inherit;;transparent>Some of the most common and necessary APIs include storage, declarativeContent, activeTab, history, notifications.</font>
@@ Redak 62: / Redak 72: @@
 <code>
-<font 10pt/inherit;;inherit;;transparent>"options_page"</font>:"options.html",
+"options_page":"options.html",
 </code>
 <font inherit/inherit;;inherit;;transparent>In options.html:</font>
-<western>
+<code>
-<font 10pt/inherit;;inherit;;inherit><!DOCTYPE html>
+<!DOCTYPE html>
-<html></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></html></font></western>
+<html>
+ <head>
+  <style>button{height:30px;width:30px;outline:none;margin:10px;}</style>
+ </head>
+ <body>
+  <div id="buttonDiv"></div>
+  <div><p>Choose a different background color!</p></div>
+ </body>
+ <script src="options.js"></script>
+</html>
+</code>
 <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>
-==== 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.
+{{https://mdn.mozillademos.org/files/13669/webextension-anatomy.png?nolink&600x600}}
 <font inherit/inherit;;inherit;;transparent>F</font>ig 2
@@ Redak 87: / Redak 125: @@
 ==== Extension Store ====
- 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.
+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.
 === 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>
-==== 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.
@@ Redak 165: / Redak 171: @@
 [[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)

racfor_wiki/browser/browser_extensions.1578601280.txt.gz · Zadnja izmjena: 2024/12/05 12:23 (vanjsko uređivanje)