{"id":3813,"date":"2015-04-22T20:26:06","date_gmt":"2015-04-23T00:26:06","guid":{"rendered":"http:\/\/webninjataylor.com\/library\/?p=3813"},"modified":"2015-04-22T22:33:19","modified_gmt":"2015-04-23T02:33:19","slug":"chrome-extensions","status":"publish","type":"post","link":"https:\/\/webninjataylor.com\/library\/chrome-extensions\/","title":{"rendered":"Chrome Extensions"},"content":{"rendered":"<ul>\n<li>Chrome extension is just some HTML, CSS and JavaScript that allows you to add some functionality to Chrome through some of the JavaScript APIs Chrome exposes. An extension is basically just a web page that is hosted within Chrome and can access some additional APIs<\/li>\n<li>Browser Action extension is a basic Chrome extension\n<ul>\n<li>manifest.json &#8230; sample &#8230;\n<pre>{\r\n \"manifest_version\": 2,\r\n \r\n \"name\": \"GTmetrix Analyzer Plugin\",\r\n \"description\": \"This extension will analyze a page using GTmetrix\",\r\n \"version\": \"1.0\",\r\n \r\n \"browser_action\": {\r\n \"default_icon\": \"icon.png\",\r\n \"default_popup\": \"popup.html\"\r\n },\r\n \r\n \"permissions\": [\r\n \"activeTab\"\r\n ]\r\n}<\/pre>\n<\/li>\n<li>icon.png (19&#215;19)<\/li>\n<li>*.html &#8230; sample &#8230;\n<pre>&lt;!doctype html&gt;\r\n&lt;html&gt;\r\n &lt;head&gt;\r\n &lt;title&gt;GTmetrix Analyzer&lt;\/title&gt;\r\n &lt;script src=\"popup.js\"&gt;&lt;\/script&gt;\r\n &lt;\/head&gt;\r\n &lt;body&gt;\r\n &lt;h1&gt;GTmetrix Analyzer&lt;\/h1&gt;\r\n &lt;button id=\"checkPage\"&gt;Check this page now!&lt;\/button&gt;\r\n &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<\/li>\n<li>*.js &#8230; sample &#8230;\n<pre>document.addEventListener('DOMContentLoaded', function() {\r\n var checkPageButton = document.getElementById('checkPage');\r\n checkPageButton.addEventListener('click', function() {\r\n \r\n chrome.tabs.getSelected(null, function(tab) {\r\n d = document;\r\n \r\n var f = d.createElement('form');\r\n f.action = 'http:\/\/gtmetrix.com\/analyze.html?bm';\r\n f.method = 'post';\r\n var i = d.createElement('input');\r\n i.type = 'hidden';\r\n i.name = 'url';\r\n i.value = tab.url;\r\n f.appendChild(i);\r\n d.body.appendChild(f);\r\n f.submit();\r\n });\r\n }, false);\r\n}, false);<\/pre>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>Resources<\/h2>\n<ul>\n<li><a href=\"http:\/\/www.sitepoint.com\/create-chrome-extension-10-minutes-flat\/\" target=\"_blank\">How to Create a Chrome Extension in 10 Minutes Flat<\/a><\/li>\n<li><a href=\"https:\/\/developer.chrome.com\/extensions\" target=\"_blank\">Chrome&#8217;s Extensions Documentation<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Chrome extension is just some HTML, CSS and JavaScript that allows you to add some functionality to Chrome through some of the JavaScript APIs Chrome exposes. An extension is basically just a web page that is hosted within Chrome and can access some additional APIs Browser Action extension is a basic Chrome extension manifest.json &#8230; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[144],"tags":[19,40,9,157],"class_list":["post-3813","post","type-post","status-publish","format-standard","hentry","category-web-shots","tag-css","tag-html","tag-javascript","tag-tools"],"_links":{"self":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/3813","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/comments?post=3813"}],"version-history":[{"count":8,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/3813\/revisions"}],"predecessor-version":[{"id":3837,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/3813\/revisions\/3837"}],"wp:attachment":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/media?parent=3813"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/categories?post=3813"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/tags?post=3813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}