how pocket chrome extension integrate buttons on Twitter for one-click saving

Question

Pocket chrome extension has a feature that "Integrated buttons on Twitter.com and Google Reader for one-click saving".

Here's a screenshot of my twitter timeline.

Every tweet will have a bunch of buttons (Reply, Retweet, Favorite, etc) if we hover over it. With the Pocket extension enabled, we can also have a integrated pocket button and save tweet to pocket with one-click (red line).

I wonder how that can be implemented since I intend to add my own buttons that will sync tweet to other services.

And ideas or links would be helpful.

Thanks

Answer 1

To modify the content of a web page, you have to use content scripts. In your content scripts, you will call DOM functions to add those share buttons (depending on how the page is generated and the structure of the page, it can be very easy or very tricky). And you add a click event listener to those added buttons. In the event handler, you can obtain the tweet text and send a message to the background page. Your background page handles these messages and make appropriate XHRs to share the tweet to other services.