For starters, I have used this dev page https://developer.chrome.com/extensions/getstarted.html and it only took me 10mins to get a hang of what is google chrome extension is all about. The whole notion of GCX that deviates from the usual C++/java methodology on compiling, linking, debugging etc is really a new experience.
Each extension has the following files: (to place in a folder on the local drive during dev)
1. A manifest file (similar to the function of *.h files needed for a code that calls library to function properly)
2. One or more HTML files (the "page" the extension used to process data unless the extension is a theme)
Optional: One or more JavaScript files (to handle interaction between the user, web page and also the browser in the form of message passing)
Optional: Any other files your extension needs—for example, image files
To get the bulk of the workings of GCX, I learn from the dev overview to have a system's level point of view https://developer.chrome.com/extensions/overview.html
Now, come the complicated part. My idea is for a user to interact with the page, without interacting with the page at all. sounds vague? Basically, the purpose is to automate a user's interaction with a page through the browser to a backend processing server. after spending a few hours of reading, I came to realise that I might need to do message passing and also content script.
I skim through many tutorials but the one listed below is very detailled and comprehensive. Thus, become my tutorial of choice to learn content script, background page and also message passing
http://vikku.info/programming/chrome-extension/get-selected-text-send-to-web-server-in-chrome-extension-communicate-between-content-script-and-background-page.htm
For this tutorial to work properly, i have installed XAMPP with some dummy php code to handle the $POST data
Somewhat, the code from the tutorial above does not worked as per expected. I followed the tutorial word for word and yielded not functioning result. In my observations, the CGX does show up with errors on chrome->tools->extensions, and "inspect popup" was grey out. To make the matter worst, the right click context menu supposed to show "send to server" but not displayed. There is no ways of troubleshooting or getting around with it. After a few days of reading from various sources, CGX dev pages included, I finally came across the reason why it does not work and made few fixes for it to work properly.
The main reason for it not to work is the change in version 2 manifest from version 1 for chrome browser version >=18 as detailed in this page http://developer.chrome.com/extensions/manifestVersion.html#manifest-v1-changes
There are dev page that describe the process of changing to manifest ver 2 http://developer.chrome.com/extensions/tut_migration_to_manifest_v2.html
Changing the manifest to v2 alone will not solve the problem. The reason was because inline scripts were made a violation with this error thrown Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:". To fix this, the script from background.html is moved to a *.js file.
manifest.json
background.html
bg.js
myscript.js and popup.html remain the same as the tutorial
i hope this update will eliminate the wild goose hunt that I have experienced from the above tutorial. Excellent tutorial nonetheless.
No comments:
Post a Comment