-
Notifications
You must be signed in to change notification settings - Fork 0
/
my-first-chrome-extension.html
131 lines (125 loc) · 4.94 KB
/
my-first-chrome-extension.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My First Chrome Extension</title>
<link rel="stylesheet" href="/theme/css/main.css" />
<!--[if IE]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="index" class="home">
<header id="banner" class="body">
<h1><a href="/">Dave Potts - Software </a></h1>
<nav>
<ul>
<li><a href="/category/coderdojo.html">CoderDojo</a></li>
<li><a href="/category/google.html">Google</a></li>
<li><a href="/category/misc.html">Misc</a></li>
<li><a href="/category/python.html">Python</a></li>
<li><a href="/category/science.html">Science</a></li>
<li class="active"><a href="/category/web-dev.html">Web Dev</a></li>
</ul>
</nav>
</header>
<!-- /#banner -->
<section id="content" class="body">
<article>
<header>
<h1 class="entry-title">
<a
href="/my-first-chrome-extension.html"
rel="bookmark"
title="Permalink to My First Chrome Extension"
>My First Chrome Extension</a
>
</h1>
</header>
<div class="entry-content">
<footer class="post-info">
<abbr class="published" title="2017-04-10T19:00:00+01:00">
Published: Mon 10 April 2017
</abbr>
<address class="vcard author">
By <a class="url fn" href="/author/dave-potts.html">Dave Potts</a>
</address>
<p>In <a href="/category/web-dev.html">Web Dev</a>.</p>
</footer>
<!-- /.post-info -->
<p>
In order to learn how to write chrome extensions I wanted to write
an extension that would display the title from the current page in a
popup like this:
</p>
<p>
<img
alt="Screenshot of Chrome Extension"
src="/images/2017-04-08-chrome-ext.png"
/>
</p>
<p>
The first thing to work out about Chrome extensions is the context
within which they run. There are two cases. First there is the code
running in the context of Chrome extensions. In this context you can
access information about browser things, e.g. names of tabs, access
bookmarks etc. And this is the context in which to make UI
interactions such as showing popups. Second there is the DOM of the
loaded page. The access of extensions to the DOM is tightly
separated from the wider Chrome extension context.
</p>
<p>
I need to access the page's DOM in order to read the title element.
To do this I use the
<a
href="https://developer.chrome.com/extensions/tabs#method-executeScript"
>chrome.tabs.executeScript</a
>
method which lets you inject some javascript code into a page, let
it run in the context of the page's DOM, and register a callback to
receive the results. The code I inject is then just a very simple
access of the title element
<code>document.getElementsByTagName('title')[0].text;</code>. The
only other wrinkle to take care of is that this code must not run
until the <code>DOMContentLoaded</code> event has been fired
indicating that the browser has built the DOM tree.
</p>
<p>Here's the full list of files needed ot make this work...</p>
<ol>
<li>
manifest.json -- the Chrome extension manifest file describing how
the extension works
</li>
<li>
popup.html -- a very simple page that the Chrome extension uses to
display the title
</li>
<li>
popup.js -- the javascript file that makes the call to grab the
title element
</li>
</ol>
<script src="https://gist.github.com/davegoopot/dbadfe0be39e74ccb0971e94368fdde7.js"></script>
</div>
<!-- /.entry-content -->
</article>
</section>
<section id="extras" class="body"></section>
<!-- /#extras -->
<footer id="contentinfo" class="body">
<address id="about" class="vcard body">
Proudly powered by <a href="http://getpelican.com/">Pelican</a>, which
takes great advantage of <a href="http://python.org">Python</a>.
</address>
<!-- /#about -->
<p>
The theme is by
<a
href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/"
>Smashing Magazine</a
>, thanks!
</p>
</footer>
<!-- /#contentinfo -->
</body>
</html>