A Chrome Extension is mainly consists of 3 pages, one for the popup and try to make this page as fast and simple as possible, don't make it load much data, don't make it render much data, don't make it reads via ajax as the user click on the icon. instead, you can use the background page, the background page is a long running script working as the browser is working, and you can communicate with it using getbackgroundpage method in the extensions api, or sending request and getting the response, and the two methods are great, the first one you are using objects and javascript functions you are calling via background page and the second one the background page itself processing the function and send you the response once it's done.
You can share data with your extension pages via html5 storage api, as the whole extension share the same domain, it also shares the storage, so all pages can see the same storage.
In content script, don't use any js lib that may be common, so it don't make a conflict with that one called in the other website, also some you should call your objects with names that is related to your extension and may not called in any other site, also use css classes carefully and don't override any element of the page, don't make a class for all h1 elements or give a style to the body, instead you can make it all with the class attribute, so you will apply your style to your elements only.
Desktop Notifications are great tool in html5, the first way to show a notification is just simple as you are calling the show method on an object carrying title, image and a message, but you cannot change its style, otherwise you can use html notification and give it the style you want, but you should give attention to how to load style into such a small peace of html elements, i may use inline styles to your elements as this is the fastest way to apply style on them, finally you have one last problem with the html notification, it's how to send data to it, you can make it get objects you have stored before in the local storage or in the web database, but it's not the optimal solution as it take much more time to read and parse data, so you can make a simple trick, by calling the page with get method to send data to the page and get it back in the page with javascript to parse the url.
No comments:
Post a Comment