Google Chrome Extension - Accessing The DOM - dom

I have been searching around the web to find out how to access the current tabs DOM to extract information out of a page from the background.html. So far I have had no luck, or at least nothing I could get to work properly.
To state the problem simply. I would like to get src of a iFrame on the page. Any Suggestions?

One way, you an treat this as a single one time request to the content-script which will fetch the dom you want to access.
http://code.google.com/chrome/extensions/messaging.html#simple
Basically, your content script sets up the listener:
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
else
sendResponse({}); // snub them.
});
And your background page sends a single lived request:
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendRequest(tab.id, {greeting: "hello"}, function(response) {
console.log(response.farewell);
});
});
When you send your response, you send it as JSON data, you can fetch whatever you want (such as html, dom, text, etc).
That is currently the only way to let the background page know anything about the contents of a page. Remember you would need content scripts and tab permissions.

Related

How do I call AdSense Auto Ads on route change for SPA (single page app)?

I have included the needed script tag in the global template.html file which contains all dynamic pages for my SPA (written in Sapper/Svelte).
www.ensueco.com
<script data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
​If I load the index page, auto ads load perfectly, but when I click a link navigating to another page/article, client-side routing will change the content in the content window, but won't recreate new autogenerated ads.
If I open a given article/subpage as initial page load, it also loads ads from auto ads perfectly, but clicking "home" in main navigation going back to the homepage, doesn't load new ads in the content window.
Q: How do I ask the adsbygoogle script to execute again on client-side routing to fill in auto ads on all pages?
I currently have a script that subscribes to route change events and forward these informations to Google Analytics:
page.subscribe(({ path, params, query }) => {
gtag("config", "GOOGLE_ANALYTICS", { page_path: path });
});
But not sure if I could do something similar in this to ask adsbygoogle to execute again? (below code has been tested and doesn't work)
page.subscribe(({ path, params, query }) => {
// (window.adsbygoogle = []).push({
// google_ad_client: "ca-pub-XXXXXXXXXXXXX",
// enable_page_level_ads: true,
// tag_partner: "site_kit"
// });
gtag("config", "GOOGLE_ANALYTICS", { page_path: path });
});
Above code at testing gives me this:
I get this error on route change then:
Uncaught
O {message: "adsbygoogle.push() error: Only one 'enable_page_level_ads' allowed per page.", name: "TagError", pbr: true, stack: "TagError: adsbygoogle.push() error: Only one 'enab…esyndication.com/pagead/js/adsbygoogle.js:58:409)"}
And if I remove the enable_page_level_ads I get this:
Uncaught
O {message: "adsbygoogle.push() error: All ins elements in the … with class=adsbygoogle already have ads in them.", name: "TagError", pbr: true, stack: "TagError: adsbygoogle.push() error: All ins elemen…js/adsbygoogle.js:185:25)↵ at <anonymous>:1:38"}
So basically, I need to execute some method that creates new tags (based on auto ads) so I can execute this method and populate all the new ins elements. I think.
Thanks
ADDITIONAL THOUGHTS
From what I understand, the script is loaded post SSR (server-side rendering), why the content, HTML, CSS, and JS from my site already is loaded once the adsbygoogle script is executed.
From a development POW, I would expect it to be possible to empty the adsbygoogle array and re-initialize the ads by google script in order for the JS, to crawl the now dynamically loaded content and based on the new window.pushed URI (window.history.pushState()), and place new ads as it would have done anyway, should it have been loaded after this particular page's SSR.
Possible Solution with jQuery
Make a file:
If you place the script tag in a separate php/html file call it autoads.html and place you ads script tag inside it. Place this somewhere you can call it from on the server via URL.
<script data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Call the file:
Using jQuery .click & .load functions we can call the autoads.html via it's URL when a link with the class .myNavButton is clicked which should execute any scripts which the file contains.
As the script isn't visible we can just load it into the body tag, although any existing tag should work.
HTML
Home
Some Page
Another Page
jQuery
$(document).ready(function(){
$(".myNavButton").click(function(){
$("body").load("autoads.html");
});
});
Alternative:
As executing the script multiple times could cause conflict issues an alternative might be target the jQuery to reload any iframes on the page.
Maybe using something like this inside the click function?
$('iframe').attr('src', $('iframe').attr('src'));
Sources:
https://www.w3schools.com/jquery/ajax_load.asp
https://api.jquery.com/load/
https://css-tricks.com/snippets/jquery/force-iframe-to-reload/

Facebook share to refer back traffic to the iframe page tab

SO here's what I am after. I have a FB page tab that runs the content of the site https://site.com/
I set up a FB share link to share a page aboutus.html. When I share it FB allows me to share this URL https://site.com/aboutus.html, but how can i send the traffic directly to the iFrame on the page tab? For example https://www.facebook.com/fan_page/app_331267943480920398/whatever_aboutus.html
I know it is possible because I saw it one day - cant remember now where.
Thanks.
You can't pass in filenames this way, that's only supported on Canvas Apps.
The best workaround to replicate this is using the app_data parameter. Basically, have your landing page (as defined in your app settings), be some kind of server side script which listens to the Signed Request, specifically the app_data parameter. Then you have that script load content based on the contents of that.
So as an example, let's imagine I want to load http://mybasedomain.com/foo.php or http://mybasedomain.com/bar.php. I direct users to https://www.facebook.com/PAGENAME/app_APPID?app_data=foo or https://www.facebook.com/PAGENAME/app_APPID?app_data=bar, then on my landing page, I have a simple if/else statement to parse that and render the relevant content -
<?php
// Assumes you have this parse_signed_request function - https://gist.github.com/872837
// And a $config array, which contains your app_secret
$signed_request = parse_signed_request($_REQUEST['signed_request'], $config['AppSecret']);
if ($signed_request['app_data'] === 'foo') {
include('foo.html');
} else if ($signed_request['app_data'] === 'bar') {
include('bar.html');
} else {
include('index.html');
}

Getting Actual Facebook and Twitter Profile Image URLS for Flex Security Policy

I'm trying to display the profile images from both facebook and twitter. For facebook, the URLs I'm receiving are something like this (not actual urls):
http://graph.facebook.com/965412145/picture
Which is then redirected to the 'actual' url like this:
http://profile.ak.fbcdn.net/hprofile-ak-snc4/370471_9631690_1796253478_r.jpg
I'm also doing this with twitter, with the same issue (redirected url).
So, when I load the image, it loads fine. But when I close the container that the image is in, then I get the security sandbox violation.
I can get this all to work if I add the URL from the 'actual' image url like this:
request = new URLRequest("http://profile.ak.fbcdn.net");
loader = new Loader();
context = new LoaderContext();
context.checkPolicyFile = true;
loader.load(request, context);
However, at run time, I do not actually know what the 'actual' image url is, so I can't hard-code that domain in (nor do I want to).
Is there a way to get the actual url (from within flex) of the image so that I can add the correct domain to the loadercontext?
Any ideas are appreciated!
If I understand correctly, your problem is that you're trying to load an image from a URL that redirects to another source. You need to know what the redirected URL is, so you can load a policy file that allow manipulation of image bytes.
If I've understood correctly, you need to detect the redirected URL by listening for the COMPLETE event (or an error event), then reference the LoaderInfo.url property. This property will reflect the end URL in the event of redirects. For example, you would have code like this in the listener:
var ldr:LoaderInfo = event.target as LoaderInfo;
var url:String;
try
{
url = ldr.url;
// Split off URL base, load policy file, etc here
}
catch (e:Error)
{
// Unable to detect final URL due to error.
}

Access Facebook albums from a flash app

I want to create a flash Facebook application in which, after pressing a button, the user will be able to browse his/her photo albums and choose a photo. How should i do that? What will be the code under the button to gain authentication from any user using this application?
Thanks.
I am currently writing a facebook application for a university assignment that will allow the user to do everything you can do in facebook, but via the flash player window. You will need a few basic things happening in order to do it.
User log in and authentication - this must be done via Facebook - using OAuth authentication, and meeting all of facebook's security policies
register the application with facebook
Use the Graph API (facebook's developer's toolkit) to get the necessary functions that will communicate with facebook via flash.
In Flash itself you will use a bunch of URLRequest functions to send out to FB for information, then you will need to retrieve that data responses and store them to variables (extracting data with a few lines of code is easy, something like this;
//initialise variables
public var photoURL:String;
var Request:URLRequest = new URLRequest("http://www.whatever the url for the graph api service you are using which is founf from FB");
//that ^^ will send off a request for the url, you then want to use the returned data by registering an event handler like this below
functionName.addEventListener(onComplete, completeHandler);
functionName(event, EVENT)
{
var loader:URLLoader = new URLLoader(Request);
var data:XML = new XMLData(load.loader); //i think this is right but not 100% sure, fiddle with it
//then you want to extract the data that is returned, for example, extracting xml data from a rest request works by hitting data from the xml by specifying a path to the object you want. an example of xml is this <rsp stat="ok"><photos ......more code="morecode"><photo url="url of photo"></photo</photos> so you can hit the url in that example like this;
photoURL = data.photos.photo.#url; //this line will grab the photo url for you, allowing you to dynamically create an array and assign photos to the flash stage according to the url you get
}
this is fairly advanced stuff and I am assuming that you have some decent knowledge on AS3, XML, and the FB API, if you need more help just reply

Deeplinking using GWT History Token within a Facebook iFrame Canvas

I would like to deep link directly to a GWT app page within a Facebook iFrame Canvas.
The first part is simple using GWT's History token with URLs like:
http://www.example.com/MyApp/#page1
which would open page1 within my app.
Facebook Apps use an application url like:
http://apps.facebook.com/myAppName
which frames my Canvas Callback URL
http://www.example.com/MyApp/
Is there a way to specify a canvas callback url (or bookmark url) which will take the user to a specific page rather than the index page?
Why? you may ask. Besides all the benefits of deep links...
I want the "Go To Application" url to take users to an index page w/ marketing material (the canvas callback url)
I want the "Bookmark URL" to take (likely returning) users to a login page and bypass downloading the marketing content (and that huge SWF file).
This may seem to be a hack but here it goes.
Facebook allows the application to tack on parameters to the url ?x=123
So I'm checking the window location to see if it contains my special 'page' parameter and loading that page. Below is my solution given that I'm using GWT + gwt-presenter's PlaceManager class.
The application deep url ends up being http://apps.facebook.com/myAppName?page=page1
EventBus eventBus = injector.getEventBus();
// Load PlaceManager so it can start listening
PlaceManager placeManager = injector.getPlaceManager();
String currentPlace = History.getToken();
String place = Window.Location.getParameter( "page" );
if (place != null && !place.isEmpty()) {
// send user to the place on the URL line
eventBus.fireEvent( new PlaceRequestEvent( new PlaceRequest( new Place (place) ) ));
} else if ("".equals(currentPlace)) {
// Nothing in URL, load default GWTpage
eventBus.fireEvent( new PlaceRequestEvent(new PlaceRequest( IndexPresenter.PLACE)));
} else {
// fire a body to the Place Manager to activate the requsted Place
placeManager.fireCurrentPlace();
}