I'm working for a project which run by chrome headless driver puppeteer, And i recently found a website (https://chrome.browserless.io/) could show puppeteer process in browser. This website appended an chrome devtoll which looks like magic.
i try to figure out how did work, and i found that this website inject a chrome devtool iframe, and the url usually like below:
https://chrome-devtools-frontend.appspot.com/serve_file/#7f3cdc3f76faecc6425814688e3b2b71bf1630a4/inspector.html?wss=chrome.browserless.io/devtools/page/(4BDC5841A823B95BF9B6107801819A31)&remoteFrontend=true
i think the version after inspector.html refer for the puppeteer code, but i don't know how this work.
i think this is some method imply over DevTools Protocol. I search the document but found nothing about how to put chrome devtool iframe in browser.
Does anyone know how to do this? or any document about this?
The Browserless Chrome Debugger you mentioned in your question has an instance of CodeMirror text editor embedded in the left hand section.
In the right hand section, an iframe element exists to display the result of the code you executed.
Simply put, you can simulate this type of behavior and allow users to execute Puppeteer code directly from your website by following a series of steps:
Sandbox a section of your system with a system container manager, such as LXD.
Install Node.js, NPM, and Puppeteer.
Install a web-based code editor, like CodeMirror, and embed it into a web page.
Validate and send an AJAX request with the code from the text editor to your sandbox server.
Sanitize the code, and then pass the code to Puppeteer.
Return the result to your callback function in your AJAX request on the client-side.
Format and sanitize the result before displaying it in an iframe.
Note: This is a naive implantation of this concept intended to explain the bare necessities of what would be required to obtain the goal in the question.
Make sure that you follow all generally recommended security practices.
Related
How to search through all the ajax responses in network tab in Chrome?
I want to do this is because it is difficult for a JavaScript developer to get to know which information is coming from which service call, especially if you are new to the project and business logic is not clear. Also, opening each service in a network tab and searching in responses of so many service calls is difficult and time consuming.
This has now been implemented on the Network tab. Whenever a search criteria is added, Chrome will offer searching through all headers and bodies.
More from offical doc,
Open the Network panel then press Command+F (Mac) or Control+F (Windows, Linux, Chrome OS) to open the new Network Search pane.
This is similar to another question this morning to search json responses. The solution is the same, star this issue this issue. Starring is triggered via the star icon in the far left area of the blue title are just under search.
Starring issues let's the developers know what people need. The more stars something has, the more likely it is to get worked on sooner.
Currently this functionality is not provided and extensions are unable to add this type of functionality since the network panel isn't extensible in this way.
In Firefox you can save all the responses as a HAR file and then search through the file in a text editor (Chrome truncates the responses).
Inspector of Microsoft Edge browser offer such feature. Useful when you need to search through traffic made by an HTTPS web site that Fiddler cannot inspect (like Facebook web site).
There doesn't seem to be a way to do this in Chrome or Firefox. My solution has been to use Fiddler, which does support it.
Edit: I believe this was working for all resources at the time of writing, but please see comments because people say it is not/no-longer working as expected.
As of Chrome version 91, if you want to search through all resources (not just AJAX/fetched resources), then you need to open DevTools and then press Ctrl+Shift+F to open a search box. If you just type into the "filter" text input then it only searches through the URLs, rather than also searching the contents.
I would like to create a browser plugin/extension that would allow the browser to read contents of a cross-domain iframe. I understand that this isn't possible with javascript, but perhaps someone could point me in the right direction of how to create a plugin that users could install. A cross-browser solution would be ideal.
Specifically, I am creating helpful navigation utility, and I want to know the url of the iframe so that I can prevent the iframe from navigating to any questionable sites accidentally. I would also like to detect the size of the contents.
Thanks in advance.
Option 1: file_get_contents:
What you can try is to get the contents from the page by the PHP function file_get_contents, load the CSS files and get the contents and the size of the page.
Option 2: Headers:
You can start here: http://www.senocular.com/pub/adobe/crossdomain/policyfiles.html
See the "allow-access-from" section where you can allow domains to be accessed cross domain when they have specific headers.
Userscripts have cross-domain XMLHttpRequest, and they will even run on all browsers. They (or at least Kango's Content Scripts) have the ability to write and read stored values for cross-window communication.
I would like to know how the Chrome plugin "iReader" works. I would like to know what is the magic behind the detect the web page is enable "reader".Moreover, I would like to know how it extract the content of blog post. How can I inspect it?
Most Chrome plugins are open source so you can download them from the project's homepage. Besides, you can also open the Chrome Developer Tools and switch to script tag. There should be some scripts named "chrome-extension://".
The arbitrary string behind the "chrome-extension://" is the ID of the plugin. If you're using Windows Vista and above, refer to "C:\Users\${YOU USER NAME}\AppData\Local\Google\Chrome\User Data\Default\Extensions" to find out the ID of the "iReader".
I have a working Browser Helper Object (BHO) which is essentially an ATL based COM component. When the component is registered as a BHO in the Registry, the internet explorer calls the SetSite() method passing an object with an interface of IWebBrowser and it also exposes a set of events that can subscribed to - such as OnDocumentComplete, which gives us access to the InnerHTML.
I'm looking for something in the same lines for non IE browsers Firefox, Chrome and Safari. I know firefox extensions is where I should start
Is it possible to achieve the same using a cross browser SDK like NPAPI ? (Because each browser has its own SDK and extension development platform like cocoa, Pepper API etc. and in addtion most of them support NPAPI.)
How can I subscribe for events so that a SetSite() sort of function could be called by the browser when the user navigates to a different site ?
The answer to your first question is simple: no, it is not possible to do this with npapi. See http://npapi.com/extensions for more information about the difference between a Plugin (NPAPI) and an Extension. If there are things you can't do with the extension that you need to do (for example, that require C++ code to work) you could put those things in a NPAPI plugin and use it from your extension. If you decide to go that route I recommend looking at FireBreath.
As to the second, it will differ based on which browser you're writing the extension for; yes, it will need to be different for each browser. A quick google search for "firefox extension event page load" yielded a useful-looking doc.
Can someone point me to an article (or discuss here) that explains how an add-on/extension can read what a user has completed in a form in a browser so you can present data to them based on the search parameters?
An example would be the Sidestep extension that opens a sidebar when a user searches on an airline/travel site and presents them a Sidestep meta search based on the parameters used on the original airline/travel site.
Browser extensions are necessarily browser specific. I would look at the APIs for your target browser. Here's a thread on Firefox 3.0 extensions.
extension to what? your body?:)
If you're talking about a browser extension, then i'm pretty sure you are on the wrong way.
You could just search for forms in the current page, and based on the field names try to figure out what did the user searched for...
A js file, and an AJAX-call is all you need, and you could basically skip the ajax call also... but i generally prefer server-side processing, as the source code is more hidden this way.