I had written about MediaPlus, a bookmarklet that gives you more control over media contents like Flash videos, images, games, HTML5 movies, etc. in my previous posts. Though the bookmarklet was powerful, it has some shortcomings inherent to bookmarklets. Many people hide the bookmarks toolbar on their browser to get more browsing space. Additionally, though the concept of adding a bookmark is known, bookmarklets with their javascript: protocol and adding them to the toolbar is still not common. Finally, people also voiced a concern that clicking on the bookmarklet icon to perform multiple actions like toggling it, rescanning the page, etc was not intuitive.
MediaPlus only manipulates an the DOM of an existing webpage as a result of certain user actions. The MediaPlus chrome extension provides a better user interface for triggering these user actions. It adds an icon next to the URL bar that needs to be clicked to interact with the extension. The rest of the post is about the technical details of the implementation.
Extensions for chrome can inject content scripts in a running page that can interact and change the DOM. MediaPlus chooses not to inject these scripts for all pages, but does so only when the user first clicks the "Start MediaPlus" button. The scripts are loaded from the extension in a background page. Since the runtime provided to this script is isloated from the javascript environment of the page, scripts and the page can have their own versions of libraries like JQuery.
Once the script is loaded, all media elements (flash, canvas, image, video, iframe) have a class added to them. The mouseover event handler that is added as a part of injecting the script kicks in to display the possible actions on the media element. This is the exact same code path as for the bookmarklet.
The only deviation here is the way notifications are shown. Since chrome provides webkit notifications, these are used instead of manually using divs for the bookmarklets.
When the user makes a video full screen or darkens the background, they may want to undo the action. In case of the bookmarklet, the bookmarklet icon in the toolbar needs to be clicked. In the case of the extension, clicking the icon brings up a menu that lets the user restore the media element to the previous state.
Except for these changes, the code path is just like the bookmarklet. Infact, the bookmarklet and the extension share the same core codebase, as illustrated in the source repository.The only additional work is to pass message between the popup on clicking the icon and the content script injected in the page.
The extension is available on the Chrome Web Store and do give me feedback on how you find it. The support page is here, and you can report bugs here.
Watch out this page for more updates.
