Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Last tweaks to chrome-extension talk

  • Loading branch information...
commit 18bf8b08ba314650b65c2859164d90d95ea57eaf 1 parent 904797d
Marc Divins Castellvi divins authored
BIN  public/images/creating-basic-chrome-extensions/behaviour_browseraction.jpg
BIN  public/images/creating-basic-chrome-extensions/behaviour_pageaction.jpg
42 views/creating-basic-chrome-extensions/index.html.erb
@@ -18,12 +18,14 @@
18 18 <h1>Selecting main behaviour</h1>
19 19 <ul>
20 20 <li>
  21 + <img src='images/creating-basic-chrome-extensions/behaviour_browseraction.jpg' style='float: right'>
21 22 <a href='http://code.google.com/chrome/extensions/browserAction.html' target='_blank'>Browser Action</a>:
22 23 Use it for features that make sense on most pages. In addition to its icon, a browser action can also have a tooltip, a badge, and a popup.
23 24 </li>
24 25 <li>
  26 + <img src='images/creating-basic-chrome-extensions/behaviour_pageaction.jpg' style='float: right'>
25 27 <a href='http://code.google.com/chrome/extensions/pageAction.html' target='_blank'>Page Actions</a>:
26   - Use it for features that make sense for only a few pages. In addition to its icon, a browser action can also have a tooltip and a popup.
  28 + Use it for features that make sense for only a few pages. In addition to its icon, a page action can also have a tooltip and a popup.
27 29 </li>
28 30 <li>
29 31 <a href='http://code.google.com/chrome/extensions/themes.html' target='_blank'>Themes</a> and <a href='http://code.google.com/chrome/extensions/apps.html' target='_blank'>Apps</a> are not covered in this talk.
@@ -65,7 +67,16 @@
65 67 <div id='basic_example' class='step slide' data-x="1000" data-y="2800">
66 68 <h1>Basic: Codegram troll faces</h1>
67 69 <p>
68   - We'll start with a none preset behaviour. Create a folder inside your projects directory and create a file named 'manifest.json':
  70 + Basic contentscript that will swap Codegram members pics at http://codegram.com with trollfaces.
  71 + </p>
  72 + <p>
  73 + None Browser or Page action will be used so we are talking about none 'preset behaviour'.
  74 + </p>
  75 +</div>
  76 +
  77 +<div id='basic_example_1' class='step slide' data-x="1000" data-y="2800">
  78 + <p>
  79 + Create a folder inside your projects directory and create a file named 'manifest.json':
69 80 </p>
70 81 <%=code 'js'%>
71 82 {
@@ -121,6 +132,7 @@
121 132 </p>
122 133 <%=code 'js'%>
123 134 $(document).ready(function() {
  135 + // Trollface image must be at 'my_extension/images/trollface.jpg'.
124 136 var trollface = chrome.extension.getURL("images/trollface.jpg");
125 137 $('#content article img').each(function(index, image){
126 138 $(image).attr('src', trollface);
@@ -129,7 +141,6 @@
129 141 <%=endcode%>
130 142 <p>
131 143 Just a little bit of jQuery here, we are getting all Codegram member images and changing the pic with a trollface.
132   - Trollface must be at 'my_extension/images/trollface.jpg'.
133 144 </p>
134 145 <p>
135 146 So, as we have no access to other files of the parent extension (except for especified in manifest) we need to take advantage of chrome.extension API (ln 2).
@@ -150,7 +161,25 @@
150 161
151 162 <div id='page_action_example' class='step slide' data-x="1000" data-y="3400">
152 163 <h1>Page Action: Intercom Messages</h1>
  164 + <p>
  165 + Next example will be about Page actions.<br>
  166 + </p>
  167 + <p>
  168 + At Codegram we use <a href='http://intercom.io' target='_blank'>'Intercom.io'</a> as feedback system for our products.<br>
  169 + There are weeks that some introduced bug or feature makes us send the same answer again and again and there is no "common answers" tool in Intercom.<br>
  170 + </p>
  171 + <p>
  172 + So I build my own extension which loads a json with common answers.
  173 + This messages are shown in a popup when you click Page action icon, and when you click an especific message, it's inserted into answer input field.
  174 + </p>
  175 + <p>
  176 + This example is not complete, it will just show an alert when messages are clicked and no json is loaded.
  177 + </p>
  178 +</div>
  179 +
  180 +<div id='page_action_example_1' class='step slide' data-x="1000" data-y="3400">
153 181 <%=code 'js'%>
  182 + // manifest.json
154 183 {
155 184 "name": "Intercom Common Messages",
156 185 "version": "1.0",
@@ -176,10 +205,13 @@
176 205 First we must make action icon/button appear. Create <strong>'background.js'</strong> and put the following:
177 206 </p>
178 207 <%=code 'js'%>
  208 + // Add a listener so background knows when a tab has changed.
  209 + // You need 'tabs' persmission, that's why we added it to manifest file.
179 210 chrome.tabs.onUpdated.addListener(showIntercomAction);
180 211
181 212 function showIntercomAction(tabId, changeInfo, tab) {
182 213 if (tab.url.indexOf('intercom.io') > -1) {
  214 + // Show icon for page action in the current tab.
183 215 chrome.pageAction.show(tabId);
184 216 }
185 217 };
@@ -187,10 +219,6 @@
187 219 <p>
188 220 I'm still not sure if it's the best way to do it, but is the only one I could made it work.
189 221 </p>
190   - <ul>
191   - <li>ln.1 - Add a listener so background knows when a tab has changed. You need 'tabs' persmission, that's why we added it to manifest file.</li>
192   - <li>ln.5 - Show icon for page action in the current tab.</li>
193   - </ul>
194 222 </div>
195 223
196 224 <div id='page_action_example_3' class='step slide' data-x="1000" data-y="3400">

0 comments on commit 18bf8b0

Please sign in to comment.
Something went wrong with that request. Please try again.