how qclean works? introduction to browser extensions
TRANSCRIPT
How QCLean works?Introduction to Browser Extensions
@qclCode & Beer 2015.03.06
What is QCLean?
● A browser extension/add-on that removing ads, suggested pages and posts on Facebook news feed for Chrome, Firefox, Safari, Opera and IE users.
● http://qcl.github.io/QCLean/
History
● Since 2013.02.28 (2 years old!)● Popular add-on (Firefox) 2013.04.06● Popular extension (Chrome) 2013.08.21
Overview
● Support 5 browsers○ Chrome/Chromium, Firefox, Safari, Opera, IE
● More than 30,000 users over the world.○ GC ~30,000○ FF ~8,500
● Donated mainly by Firefox user!○ Receive about $24○ Donate NOW!
Overview
● Rating○ ★★★★★ 4.5/5.0 Chrome○ ★★★★ 4.0/5.0 Firefox○ ★★★★ 4.0/5.0 Opera
● Operating System○ 93% Windows
● Languages○ Chrome 74% zh-tw○ Firefox 53% en-us
About icon
Extension/Add-on v.s. Plugin
● Extension/Add-on○ Extensions are small software programs that can
modify and enhance the functionality of the browser. You write them using web technologies such as HTML, JavaScript, and CSS. (Chrome)
● Plugin○ Plugins are shared libraries that users can install to
display content that the application itself can't display natively. (MDN)
Extensions
● Written by HTML/JavaScript/CSS● chrome://extensions● about://addons
Plugins
● Written by C/C++, depend on platform○ NPAPI, NaCl (Chrome)
● chrome://plugins● about://plugins
Plugins
● NPAPI ○ PCManX GTK2 on Chrome using NPAPI
@qcl, @JeromeWu, 2010
Extension developing 101
● Firefox○ http://blog.qcl.tw/2013/08/sdkfirefox-add-on.html
● Chrome○ Create a file named manifest.json○ Open your Chrome, go to chrome://extensions○ Click Developer Mode○ Then import the folder which contains manifest.json
manifest.json
{“manifest_version” : 2,“name” : “extension_name”,“version” : “version_string” ,“description” : “extension_description”...
}
● https://developer.chrome.com/extensions/manifest
manifest.json (QCLean)
Background
background: {“script”:[“background.js”]
}
● It exists for the lifetime of your extension.● Only ONE instance of it at a time.● It can be used to manage some task or state.
Permissions
● permissions: [“tabs”]
● https://developer.chrome.com/extensions/declare_permissions● https://developer.chrome.com/extensions/permission_warnings
Content Scripts
“content_scripts” : [{
“matches”: [match patterns],“css”: [“kerker.css”],“js”: [“haha.js”],“run_at”: “document_start”
}]
● https://developer.chrome.com/extensions/content_scripts
Content Scripts
● Content scripts are JS that run in the content of web page
● Can not use chrome.* API of extension, i18n, runtime, storage
● Can not use functions defined by extension page
● Can not use functions defined by web page or other content script
● Match Pattern○ https://developer.chrome.com/extensions/match_patterns
Content Script
● run_at○ doucment_start
■ Before any other DOM is constructed or any other script is run
○ doucment_end■ After DOM is complete, but before subresources
like images and frames have loaded○ doucment_idle (defualt)
■ After window.onload
Remove Suggested Pages&Posts
● First commit of QCLean
Remove Suggested Pages&Posts
● What will happen when all posts on your newsfeed use the same class name?○ All the posts will be removed :p
● Or the class name used by other elements on the page○ Those elements will be removed, too :p
● Or you can not get Ad elements directly
● Select elements that you can identify then try to do something.
Remove Suggested Pages&Posts
● Select some special elements, try to find the Ad block, then remove it.
● If Facebook changes the structure of page, this method will GG
● It will run once when page did load. (run_at)
Facebook infinite scrolling
● When to run the script?○ document_start? document_end? document_idle?○ setInterval?
● When you scrolls down the page, it will load more and more post (and Ads)
● Need to find a trigger point to remove Ads!
Override the prototype of DOM
● Check Ads when appending new elements into the page.
● Override the prototype of some DOM○ HTMLDivElement.prototype.appendChild○ HTMLUlElement.prototype.appendChild
Prevent Requesting Ads
● Check AJAX requests by overriding XMLHttpRequest.prototype
Content Scripts
● Can not override the prototype of HTML DOM in web page (directly)
● But we can add new element into web page.
Override prototype is DANGEROUS
MutationObserver
● QCLean-Chrome-Experiment
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
ClassName changed frequently
● Static classnames list is not enough● I want to build a API for user, it can update
classnames list.
Some QCLean API
● Story API○ http://qcl.github.io/QCLean/api/story.js
● Line Tagging API○ http://qcl.github.io/QCLean/api/lineTagging.js
● XHR Cross-origin request issue● Content security policy issue
Content Security Policy
“content_security_policy” : “policy”
● It can not be show on permission warning● CSP works as a black/whitelisting mechanism
for resources loaded or executed by your extension.
https://developer.chrome.com/extensions/contentSecurityPolicyhttp://www.html5rocks.com/en/tutorials/security/content-security-policy/
Distribute Extensions
Cost Review Publish
Chrome $5 no directly publish
Firefox free optional directly publish
Opera free required after review
Safari free required unknow*
Extension source
● Web Store / Addon Center○ You don’t need to mantain a update server
● Mantain your own update server
Update URL
update_url : “http://qcl.github.io/QCLean/chrome_update.xml”
● Packaging your extension (with key)○ extension.crx
● Write update XML○ https://developer.chrome.com/extensions/autoupdate
How others write extensions?
● Install the extension● Get the extension’s ID (chrome://extensions)● Go to
○ ~/Library/Application Support/Google/Chrome/Default/Extensions (mac)
