There is a web page whose URL is like https://some.site.com/page, but that page itself is just for hosting menus and the real content page, whose URL is like https://some.site.com/realpage,is embedded as an iframe.
I want to modify some elements on the actual content pages starting with https://some.site.com/realpage. I created a FireFox extension and set the permissions and content_scripts/matches to https://some.site.com/realpage* and visited https://some.site.com/page, but my extension was not loaded (I could not see it in the Debugger -> Sources tree).
I modified the permissions and content_scripts/matches to https://some.site.com/* and then visited https://some.site.com/page. My extension was in the Debugger -> Sources -> Main Thread and when I console.log(document.URL), I see only https://some.site.com/page printed. But my extension was not there under https://some.site.com/realpage node.
Why is my extension not loaded under the https://some.site.com/realpage node in Debugger -> Sources? I wondered if extensions are not loaded for iframe pages, but I can see other extensions like uBlock Origin loaded for it.
In this case, what is the correct way to modify the actual content (https://some.site.com/realpage). Load my extension at the outer page https://some.site.com/page, and then try to get the iframe and modify it there? Or, load my extension at the real page https://some.site.com/realpage and modify the page as usual (non-iframe pages)?
Related
First of all, I thank you for your help and support.
If I want to attach a content script to a tab that I do not have its id. The tab is opened when the extension's button is clicked as in the following.
function openIndexPage() {
browser.tabs.create({
"url": "data/index-page.html"
});
} //end openIndexPage
browser.browserAction.onClicked.addListener(openIndexPage);
How can I attach content script to the index-page.html? I can not use the normal HTML <script></script> to attach it as it needs to access the storage. Can you help me solve this dilemma please?
You can't inject content scripts into HTML pages from your extension and there's no need to do so.
HTML pages which are loaded from within your extension, be that as a tab, window, options page, popup, etc., are loaded into the background context. This is the same context in which your background script(s) run. However, scripts associated with such HTML pages (i.e. in separate JavaScript files referenced from <script> tags) run in the scope of that page. They have access to all the chrome.*/browser.* APIs which are available to your background script(s). If they so desire, they can gain references to the other scopes within the background context. If you want more information about communicating between such scripts, please see: Communicate between scripts in the background context (background script, browser action, page action, options page, etc.)
Thus, there is no need to load a content script into such pages. The scripts running in the page already have access to the DOM of that page and all the privileged extension APIs. Such scripts are not restricted to only the APIs available to content scripts.
Side note: Content scripts are attached to the tab's content, not the tab
Content scripts are not attached to a tab, per se. They are injected into the content that is currently displayed in a tab. This happens either through a manifest.json content_scripts entry having a matching URL, or through tabs.executeScript() being called to inject it into a specified tab. If different content is loaded into the tab, then the content script is destroyed. Thus, it's attached to the content, not the actual tab. In other words, it does not get automatically reloaded when the tab changes to a new URL, unless that URL matches a manifest.json content_scripts entry or tabs.executeScript() is called again.
I am looking for a firefox plugin that can store entire page in cache and load it when ever that address is typed, and only load content from server if we press reload cache or similar functionality.
My usecase is, I use documentation of Laravel, Bootstrap, Jquery etc on regularly based but each time I am accessing it from the internet, these pages do not have any changes for many days. I dont want to store the webpage as file and access it, I would love to do it in comfort of your web browser than opening files.
I think firefox already does this. Load a page in a tab, then go to top left firefox menu > developer > work offline.
Reload that page in tab its from cache.
If you ever go work offline it loads from cache.
I have a bookmarklet that opens a dialog (in reality an iframe) and extracts some information. When the dialog is dismissed I want to put that information into edit text fields on the original page in the browser (like the way LastPass will automatically fill-in login forms on a page).
Is this possible? I'm thinking that same-origin-policy will prevent this, but maybe there is a way (without installing extensions such as greasemonkey, etc).
Edit: to be more precise: the bookmarklet appends a DIV to the original page; that DIV contains an IFRAME that loads my page; this page fetches some information; once this information is fetched within the IFRAME I want to remove the DIV and (somehow) put that information into the original page.
The issue I face is communicating the information in the IFRAME back to the original page.
What you are looking for are the functions addEventListener and postMessage.
Relevant links:
http://caniuse.com/#feat=x-doc-messaging
How do you use window.postMessage across domains?
I need to know how is it possible using AJAX to navigate between pages like Facebook. When I click a link in Facebook the url in address bar changes and the main content area is reloaded with new content but the navigation list on left, header on top and chat on left side remain intact. It appears that those sections are not reloaded. How this become possible when the address bar changes? please ,if possible give a small example.
You can use libraries such as history.js coupled with ajax calls. This library dynamically modifies the URL as you are clicking around the site. The library is available at https://github.com/browserstate/History.js. And a great demo is available at http://rypit.me/demos/isotory/tutorial/history.js.html
I have a JSP page, where some parts of the pages are loaded from the backend using AJAX. For example, when I first open the page, the URL is http://www.made-up-domain-name-because-of-stack-overflow-restrictions.com/listUsers.do. The page contains an "add user" button, which loads HTML content (containing a form etc.) from the backend to the div-element with id "addArea". The URL stays the same the whole time (naturally), as the request is done in the background.
The problem I have is that the content loaded using AJAX is not completely viewable with any means.
Using Firefox I can see the new HTML with the Firebug add-on and "Inspect element", but the content within the script-tags is not visible that way (also not in the "Script" tab in Firebug - only the originally loaded scripts appear there). If I use "View page source" in FF a page reload is executed and I don't see the newly generated content (I only see the content of page http://www.made-up-domain-name-because-of-stack-overflow-restrictions.com/listUsers.do as it was when first loaded).
With Chrome I have the same problem as with Firefox.
Using IE I see only the original source.
Of course I can work around this by adding debugging mechanisms to the JS code and working half-blind, or moving parts of the JS code to external files etc., but if by any means possible, I would prefer to just view the code loaded using AJAX. Any suggestions, perhaps using some add-on?
Update: There is a better way: see the accepted answer for this question: How to debug dynamically loaded javascript(with jquery) in the browser's debugger itself?
You can use the JavaScript Deobfuscator extension for that. It can show you what scripts are compiled/executed on a webpage - including the ones that were loaded dynamically.