Downloaded 26 times
Uploaded byJonathan Perl
Building a chrome extension with meteor
This document discusses building Chrome extensions using Meteor. It covers why build extensions, the main parts of extensions like HTML/CSS, JavaScript and Chrome APIs, and UI elements like browser actions and popups. It then explains how Meteor can be used to build extensions, including using Meteor-DDP to communicate between the extension and Meteor app server, and how to handle more complex use cases like the Code Bounty extension. Resources for learning more are provided at the end.
![[Kotlin Serverless 工作坊] 單元 1 - 開發環境建置](https://cdn.slidesharecdn.com/ss_thumbnails/kotlin-serverless-ep1-dev-env-210423105244-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Kotlin Serverless 工作坊] 單元 2 - 簡介 Kotlin Serverless](https://cdn.slidesharecdn.com/ss_thumbnails/kotlin-serverless-ep2-introduce-cloud-functions-210423105247-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Kotlin Serverless 工作坊] 單元 4 - 實作 RSS Aggregator](https://cdn.slidesharecdn.com/ss_thumbnails/kotlin-serverless-ep4-rss-aggregator-210423105251-thumbnail.jpg?width=640&height=640&fit=bounds)
Building a chrome extension with meteor
- 1. Building a Chrome Extensionwith Meteor Jon Perl jon at codebounty.co @jon_perl
- 2. Why build anextension + examples What are the parts Build one with Meteor Complex use cases (w Code Bounty) Today
- 3.
- 7. How? HTML / CSS Javascript+ chrome APIs Chrome UI elements
- 8. chrome.* APIs • bookmarks •events • history • power • webRequest + 48 more
- 9. UI Elements Browser ActionPage Action
- 10.
- 12. Get reload value frommenu in milliseconds Trigger chrome.tabs.update({url:..}) to reload page
- 13. But what aboutMeteor?
- 14.
- 15.
- 16.
- 17.
- 19.
- 20.
- 21.
- 22. And More Testing wSelenium and CucumberJS RequireJS for organizing code Grunt for filling in config values
- 23. Why build anextension + examples What are the parts Build one with Meteor Complex use cases (w Code Bounty) Recap
- 24.
- 25.
Editor's Notes
- #3 then have some time for questions
- #4 Why build a chrome extension?Add functionality to the browser, or to add functionality to specific sites or all sites.Here are some examples…
- #5 LastPass. Stores your login credentials in the cloud, then auto-populates the input values
- #6 PageReload. Auto-reloads the page based on a user configured timer.This is for non-meteor pages of course.
- #7 Code Bounty. Extended GitHub to allow you to post bounties on issues
- #8 - Extensions are all built with html / javascript / cssAccess to all the javascript APIs + chrome functionality through javascriptapis under the chrome namespace
- #9 Quickly run through some of these…Some api’s that get into shady use case land, like the ability to keep’s the users computer awake or to intercept web traffic.You have a lot of control over the browser, so use it wisely.
- #11 The main chrome ui elements you would probably work with would be the- popup when a user clicks on your extension icon- the context menu when a user right clicks- you can override the bookmark manager, history, or new tab pages, or add to the add to developer tools if you want to get really advanced
- #12 Let’s break apart one of the extensionsInspect extensions with chrome developer toolsto see how they are builtto debug themPageReload is a form with a bunch of radio buttonsClick item or submit form it triggers setReloader()
- #13 This is the code for the popup menu.It walks through the radio buttons. Chooses the value in milliseconds.Then here it calls the chrome.tabs.update chrome extension api, setting the url which reloads the page
- #15 There are two ways (that I know of) that you can connect the chrome extension to meteor.https://github.com/eddflrs/meteor-ddp a client side DDP implementation in javascriptInjecting a meteor page as an iframeLet’s go over the first one, using meteor-ddp
- #17 Icons48px used on extensions management page (chrome://extensions)19px default_icon is used as the extension browser action iconMust choose between:browser action: permanently visiblepage action: conditionally show on certain pagesBackground scripts run in the backgroundCan also have content scripts which are injected and run as part of the page
- #19 Run / demo meteor parties https://github.com/jperl/meteor-chrome-extension
- #20 meteor-ddp supports oauth can use access methods and subscriptions which require authorizationWorks for content scripts, background script complicated because of the need to postMessages back and forth from the content script to the background script - Didn’t have time to implement that, but happy to help anyone who needs it
- #21 For the extension we use both ddp and an iframe to integrate meteorDdp is used to fetch all of the data the extension uses (total bounty amount, if the current user can reward this bounty, if this issue can have a bounty placed on it)
- #22 Iframe is used for our reward screen ui. Built with out of the box meteor templates