injecting react tsx into content script - google chrome - javascript

I'm having some issue I couldn't find information about online.
I have a chrome extension, which when I click on the extension's icon, I have a popup UI opening.
Next, when I click on a certain button, it injects JS code into my content script. Cool!
Issue begins when I try to inject a react code into the page. How could I inject such thing instead of JS code?
Or even better, how could I render there a new ReactTSX component?
I'll just add that what I attempt to do is that when a user clicks on a button in the popup's ui, it takes a print screen using captureCurrentVisible, which I want to pass to a large screen so I can draw on that image using a canvas (I have built the component responsible for that, I just don't know how to open a window, full screen, which I could edit the image on).
Regards! :-)

Related

Load External Custom Page and Execute Custom CSS or Javascript on The page

i'm building an online document portal that supports all Microsoft Office formats.
Instead of building my own module, i'm utilizing Google Docs Online Viewer since it already handles
this task properly, my only problem is it loads the header toolbar, which i dont want.
take for example This custom pdf-URL(i just googled for any pdf document), The navigation toolbar at the foot, but the header toobar, i want it hidden - all within the iFrame.
https://docs.google.com/viewer?url=http://www.scorpioncomputerservices.com/Press%20Coverage/Billgates.doc&embedded=false&controls=false
After Inspecting the Element on Chrome, i found the section of code controlling the element, problem is, how to hide this element on page load, by forcing a script/style to be executed on the page, while loading.
i would like to know if there's a way i could force-delete or hide the element controlling the toolbar within the iFrame, or better still if there are any alternatives to what i intend to do. my code would have looked like this
var obj = iframe.document.querySelectorAll('[role="toolbar"]');
obj.parentNode.removeElement(obj);
// or - i'm not sure anyof this would work.. and since it is loaded inside an iframe
// how do i execute this.
obj.remove();
i dont want my audience to be able to download the document, obviously curious developers might find a way, but thats going to be less than 2% - 5% of the total users.
how do i go about this please using javascript/CSS/or any library.
If you change the GET variable embedded to true the viewer won't display the top bar, however there's no way to edit the page inside the iFrame as Google has enabled cross site protection so the browser will prevent you from running any javascript to modify the content of the iFrame.
The only way to use the google document viewer is to get your site to load it in the background (not using an iFrame) and modify it before serving the page to the user.
Or alternitively I reccommend using an open source JS PDF viewer such as ViewerJS

Display a web page in a container, scroll, switch to next

I have a list of urls I need to show on a screen for a presentation. After the page have loaded, I want to scroll to the end of the page, and when it's reached load the next one.
The problem is, most of those pages have 'X-Frame-Options' to 'sameorigin', so I can't use iframes. What other options do I have ?
I thought about, maybe, a chrome extension will complete rights over navigation that would handle the whole process...
Thanks ahead.
So, the solution was indeed to build a Chrome extension. Only the software containing the page gives you that much control over it when you don't have access to its code - namely, the browser.
I built a very simple extension using chrome.tabs in the background to open a new tab or update it, injecting a script in the page whenever it's loaded, and using messaging to inform the background when scrolling is finished and it's time to load a new page in the list.

Connect with google plus button

I have implemented Connect with Google plus on a website. It is working fine except the following case: Consider I have logged in to Google account and then I visit my website I can see the popup from Google which is according to the snipped screen shot as below
I don't want this popup to be visible ever. Any
The best way to deal with this problem is by creating a simple JavaScript code and putting it in your pages. If the problem occurs on all pages, create a master file {name}.js and import it on all relevant pages. Right click on the bar, and choose "Inspect Element". Note down the div id/class name and cancel the inspect element dialog. Next, create a JS script, which states onLoad, the div box in concern will not be displayed.

THREE.js Editor: How to access main script in an example

I can open the THREE.js editor at http://threejs.org/editor/.
I can open an example app e.g. PONG.
I can activate interactive animation by clicking on Play in the menu bar.
I can deactivate the animation by clicking on Stop in the menu bar.
I wish to edit the Main Script (the "Scene/Game logic" script) using the Editor as per this illustration:- https://plus.google.com/photos/+ricardocabello/albums/6104607340192211937/6104607354618509202?pid=6104607354618509202&oid=113862800338869870683
I can access Script controls for graphical objects. But how do I access the Main Script?
I am using
Opera version 28.0.1750.51
Laptop System: Windows 7 32-bit.
Go on the Pong project. From there you can click on file-> Publish. Unzip the file then you can see app.js in js folder. It's the script that is controlling the animation. It's the only way I know to view the source. Hope this help! :)
Aha. Got it.
Within the "SCENE" panel on the RHS of the Editor it is necessary to select the "Scene" object. This will add another panel called "SCENE" and below that there will be added another panel called "SCRIPT". (May need to scroll down to see it). The loaded "Game logic" script will be indicated. Just click on the "Edit" button to display the javascript in the main window of the Editor.

Will Firefox start my SDK extension automatically after the browser starts - loading screen

I am new on add-on development using the SDK.
I want to ask you guys if it is possible to start my extension automatically after I open my browser? At the moment I starts after I press my widget icon in the toolbar (the panel shows a table with some data I get from the DOM).
Another thing I want to ask you: is it possible to show a loading screen (like a ajax gif) inside my panel (my extension needs a few seconds after switching a tab, to get the DOM data) every time I press the toolbar button.
First of all: One question per post, please.
Extensions are always started with the browser. When it comes to SDK add-ons, your main.js will be called. It's your job to perform any additional initialization form there.
Panels contain regular HTML pages and therefore can use images.
It's impossible to tell you more, without you providing more details and the code you got so far!

Categories