so I am developing a google chrome extension for my chromebook. The idea is to make a “magnifying” type of effect wherever the mouse goes on the current webpage in order to zoom in on text/images or whatever the mouse hovers.
I have the code for this effect working on a webpage, it does exactly what I want.
Where I’m confused is how to integrate this to a chrome extension. I would want an extension like button to show up in the upper right corner of the chrome browser and then you can click it and then a “box or magnifying glass” would appear and then you could click and drag it around the page. The box would go away if you clicked the extension button again.
This is what I know after a bit of online searching…
– I need a manifest.json file, my current file looks like this…
{
"name": "magnify",
"version": "1.0",
"description": "This will magnify an area where the mouse hovers",
"browser_action": {
"popup": "popup.html",
"default_icon": "magnify.png"
},
"content_scripts": [{
"matches": ["http://*/*"],
"css": ["magnify.css"],
"js": ["magnify.js"],
"run_at": "document_end",
"all_frames": true
}],
"background_page": "background.html"
}
- I’ve tried a few different things, but i’m sure I have a few things that I don’t need.
- Also you can go to http://www.supertecho.com/background.html in order to see what the current code is for my magnification idea.
- I have a popup.html file but I’m not sure if the popup.html or the background.html code would be more necessary or not (or maybe both is needed).
Let me know if I am unclear about things and I will clarify!
Thanks a lot in advance 🙂
The magnifying effect code should be a content script, running in the DOM of the browsed pages (effectively injected into each page). See http://code.google.com/chrome/extensions/content_scripts.html