Good morning,
I have create a script with the extension CJS( custom javascript for website) for chrome that click and inject script on several page of a same domain automaticly, the script detect when the page change and alert me(with a simple alert()) about a new content in the page.
It works perfectly but I need to let open the web page, I put it as homepage but I don't wanna inadvertently close it. So I have create an extension with an iframe that contain the site witch I want insert the script but the extension CJS does not works on chrome extension.
The problem is that the site is in https so event if I disabled the Content Security Policy (CSP) I can't get the content of the iframe and inject script myself.
So my question is how to have a background page of an external site that let me execute script with chrome.
The extension is for personal use, I don't need an universal solution.
Thanks
edit:
the iframe appear in the default_popup:
Related
I am trying to develop a #mentions feature in my Chrome Extension, using jquery atwho (https://ourcodeworld.com/articles/read/516/how-to-create-a-mentions-autocomplete-with-jquery-and-atwho). This Extension runs changing Gmail Interface. I have comment box inside a popup, which I want to have the atwho feature. What is the correct way to insert these scripts in my code? (Should I push the script in the header of Gmail, or is there some other way?). (Usually all the other third-parties scripts I use, are in a vendor.js file and are not pushed in the header of the page).
Initially, trying to insert the script in the header, I get an error that jQuery is undefined. After I also insert the script in the header of Gmail, my Extension does not load correct.
For whatever reason, that's not important, i'm trying to combine google shopping with another page via an iframe.
I've tried the approach proposed here, consisting of embedding a google custom search query in an iframe, but google custom search does not allow access to the shopping tab.
I figured, if you can't embed Google, embed yourself in it. So I proceeded to inject some jQuery in the page
var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load, then type.
jQuery.noConflict();
clean up the google shopping search results page to what I needed, namely the html inside the div#search
jQuery(function($) {$('#search').show().parentsUntil('body').andSelf().siblings().hide();});
Create an iframe and inject it:
var iframe = document.createElement('iframe')
iframe.src="http://example.com"
iframe.width="100%";
iframe.height="500";
iframe.style="visibility:visible";
document.body.appendChild(iframe)
Only problem is the iframe doesn't load the contents of the page and in turn is blank. If you try the above snippet in any other page, it works. It seems like Google is blocking the iframe from loading. How can I get around that?
Google seems not to work using an iframe... Even if you are not using JS.
What you should use instead is the Google Custom Search API, wich allows you to create a custom search engine.
You just have to enter an example website, change the Option to Search all the web. and remove your entered website again.
To create a custom Search engine you'll need a google account.
Start here.
When I run that code, the following error is reported in my console:
VM259:7 Mixed Content: The page at 'https://www.google.co.uk/?gws_rd=ssl' was loaded over HTTPS, but requested an insecure resource 'http://example.com/'. This request has been blocked; the content must be served over HTTPS.
Changing it to an HTTPS URL:
var iframe = document.createElement('iframe')
iframe.src="https://example.com"
iframe.width="100%";
iframe.height="500";
iframe.style="visibility:visible";
document.body.appendChild(iframe)
… makes it work fine (albeit it tucked behind the logo):
Tnx for #Quentins comment.
UPD:
Embedding code to google website:
In general you can't embed code for page that you don't own.
if user opens your website and open another tab with google or your website opens another tab with google, your website doesn't have access to google website source code/context and you can't affect on google website, because there are completely isolated from each other.
Seems your actions for cleaning results and embedding your iframe in google page you made in your browser console. That changes affect only locally for your browser and doesn't affect for any other users that open google website.
Possible solutions:
Actually, you can embed some code to other pages, but you need to use:
Browser extensions (too complicated, because user need to install your extension for browser)
XSS/other vulnerables (that's almost impossible for google search website)
Embedding google to your page:
You can't embed iframe from google because of x-frame-options header in http response for google.com. There is no good workaround, sorry.
The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame>, <iframe> or <object>. Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.
I have a chrome app which are getting user keystroke and screenshot, it is working properly by it self, but I want to get keystroke and screen shot from other opens chrome apps, which I have to get all open pages and inject my script to them, does any body know how can I get the list of all open html pages and also how to inject script to them?
You can't do that with Chrome Apps.
They are self-contained by design and cannot interact with the browser this way, let alone other apps.
I am creating a bookmarklet and this is the bookmarklet script which when clicked in bookmarks toolbar calls a javascript file which loads more content...On Google and Facebook, file BookmarkletAc.js does not get loaded and shows a message "Reload the page to get source for:...". On other websites this file is called and bookmarklet works fine, and i can not see what the problem is. File is blocked from loading, and i've read that there is no need to whitelist domain to Facebook or google, or am i wrong? What could be the problem.
<a onclick="alert('Drag button to toolbar');return false;" href="javascript:(function(){var head=document.getElementsByTagName('head')[0],script=document.createElement('script');script.type='text/javascript';script.src='//www.example.com/bookmarklet/BookmarkletAc.js?sId='+Math.floor(Math.random()*99999);head.appendChild(script);})();" class="bookmarklet-button">Add bookmarklet</a>
Facebook has a Content Security Policy which prevents any bookmarklet from working. A CSP can be set via the HTTP header for any page.
Based on my personal testing, Google's regular search pages do not block bookmarklets, but maybe you are testing on some other Google site or page.
I just answered a related question here: Content Security Policy for extensions and bookmarklets
I am new to extension programming but find making extensions in Chrome much more easier, but now that I am trying to port my test extensions to FF I have a few questions of how to do the same things I do in Chrome... now in FF.
For example:
In Chrome I have a page in my extensions directory called: domains.html
I link to that page from my popup and it has access to all my scripts etc but the "outside" world cannot directly access that.
Is there any such thing in FF so that I can show a page that is in my add on folder and has access to my add-on's JS and other files?
Thanks!
Take a look at some of the docs for opening URLs in new Tabs and manipulating the content of the tab:
https://developer.mozilla.org/en/Code_snippets/Tabbed_browser#Opening_a_URL_in_a_new_tab
Once you get comfortable with that, try opening an HTML page that lives in your add-on. First, you need to be aware of the 'content' package name you registered in your chrome.manifest file. Second, make sure your 'domains.html' file is in the content folder of your add-on. To open the web page in a new tab using a button or menu in Firefox use code like this:
gBrowser.addTab("chrome://mypackagename/content/domains.html");
You can should be able to load other JS and CSS files from your add-on into the web page using similar chrome:// URIs.