I want to modify chrome start page, change background and maybe logo.
I want to include jQuery in users local storage and load it while users page loads ( search page )
I never done anything with chrome so I want some way where to start. Do I go reading with apps or extensions?
As a rule of thumb: Choose an app if you want to develop an (independent) application that can stand on its own. If you want to interact with the browser (e.g. modify a web page), build an extension.
In your case, you definitely need an extension.
Change start page - use chrome_url_overrides in the manifest file to override newtab.
Locally store jQuery: Although it's possible to store jQuery in local storage, you're probably fine with packaging jQuery with your extension.
To add it to your user's "search page", you have to use a content script. By default, content scripts run in an execution environment that is different from the page (the document's DOM is shared though). Usually, this behavior is desired. If you really want to expose the jQuery library to the scripts in the page, take a look at this answer.
If you really want to load some script from a remote location and use it as a content script, read Chrome extension adding external javascript to current page's html.
I'm not sure what you mean by "change background and maybe logo". If you're referring to the browser's appearance, the only option to do that is by creating a theme. This must be a separate extension.
Related
I am trying to learn what could be the best ways of developing user interface for chrome extension for my application. The 2 approaches that I have come across are i)Using a browser action with default_popup html page or ii) Injecting some component into the page that is loaded in the tab. First approach is pretty straightforward but has some restricted use (like it is destroyed on tab/window switch which is useful in the context of my application). Coming to the second approach, it seems it requires every component which can be injected to be listed under web_accessible_resources. As the extension UI gets complex, this list is bound to increase. But surprisingly, Pocket extension's manifest does not seem to list any js files or html files though it does not use a popup page too. How does it work? Is there any other way of creating the user interface too?
Have you checked on the documentation regarding chrome.windows API? This API will allow you to create new windows and tabs in the browser, so you can create the html content from your extension. All you'll need is declaring the pertinent permissions on the manifest file. You can read more information here: https://developer.chrome.com/extensions/windows
I need to create a software solution, that will use browser capabilities to perform some tasks.
More specific, i will need to do the following:
Load some page (by URL)
Analyse generated content (DOM), i need to access dynamically generated page, not just initial HTML document
Do a screenshot of some region of the page and save it to a file
What is the best way to do this?
What existing browser would allow me to do this and how exactly? Generally i prefer Google Chrome or Mozilla Firefox.
You can do that using casperjs
It will allow you to load a webpage, then capture any area and save it to a file.
It allow also to play with DOM
You can create a Google Chrome extension to do that.
1.In the extension, you can load page or add listener to observer the tab activities.
2.You can execute scripts on the page loaded,even use jQuery to Analyse the dom.
3.You can use chrome.tabs.captureVisibleTab function to take a screenshot,And then use canvas to handle the screenshot image.
more details about Chrome extension develop:https://developer.chrome.com/extensions/getstarted.html
As you may know, js files on chrome extensions and pages cannot directly access each other and they run on isolated worlds.
However, I want to access some of the functions on a page and call those functions from the plugin.
And I do not want to make my own version of those functions.
I'm wondering if this is possible... Would appreciate all the answers.
EDIT: The functions are on the background page. Its a browser action extension.
more info: Basically, I have a context menu which creates a tab to submit url to a page. however, re-opening the page makes many tabs and opening so many pages takes time. So I am willing to call the javascript function on the page directly from the extension if one instance of the page is open already. And I have access to the page permission-wise.
TL;DR: Need a way to call a javascript function on a page (without copying it locally) from an extension.
Assuming you know the tab ID of the page whose function you want to call, you can use chrome.tabs.update(tabId, {url: 'javascript:functionNameHere()'}); from your extension page. This works because javascript: URLs are mapped to script execution in the main (i.e. page, not isolated) world.
I am trying to make a Chrome extension for personal use that makes all the password fields type="text", so I can see the clear passwords. (I know that I can probably find something like this in the Chrome store, but it's something I want to do myself).
I am however having a hard time accessing the actual page content (the page I'm viewing in the tab). If I do
document.getElementById('text')
this selects the element from background.html not the page I'm viewing. How can I access the actual page?
Also, is there a way I can include an external javascript file so I can use functions from there?
You would need to use content script - javascript file injected into an actual page with access to DOM and events.
I have been reading the dev guide but haven't been able to work out how to put my own codes into webpages
I know it is possible because AVG uses it (in it's link scanner), and FastestChrome extension uses it too (highlight something and a link to a search pops up).
I have a backgrounded page but I can't get it to effect the webpages I go on (permissions are correct as I can get css to effect)
I am probably missing something really simple :/
It's not intuitively presented in the documentation but your background page can not access the current webpage b/c they are in different contexts. In other words the background page is it's own separate page so it has no access to any other page's DOM.
If you want to affect the page the user is viewing in the browser you will need to use what is referred to as a "content script".
If you want to communicate between content scripts and the background page you will need to refer to the message passing API. Check out my extension's source code for reference. I do exactly that.
Just remember...
Background Page: used for general logic in your extension, not anything page specific.
Content Scripts: are loaded into every page the user sees, and can manipulate that specific page.
Those probably use Content Scripts to inject Javascript into webpages. These scripts run in the context of the web pages and can access the DOM.
You can either define a script to always run in a web page by declaring the script file in the extension manifest, or you can use your background page to inject a script when needed.