While this could be a very basic thing, I can't seem to find an answer to this one. I see a lot of discussion about content scripts. When I open web inspector in chrome, and select sources, I see a tab called content scripts. I see a couple of random numbers and a number of scripts and I can't seem to figure out what these are.
How are these being shown? where are these coming from? I can't see my server serving any of these.
In Google Chrome, content scripts are JavaScript files that are part of browser extensions. They operate on the web page much like regular javascript does, but from a protected scope (Google calls it an "Isolated World").
Content scripts have a few more privileges than ordinary javascript and, for that reason, content-script JS and page JS cannot ordinarily interact with each other.
When looking at that Content Scripts tab, you will see both the scripts added by any extensions (or by userscripts which are compiled into extensions in Chrome), and also content scripts that are built-in parts of the browser, specifically the API that extensions can use.
You can match extensions to those "random numbers" by opening the extensions tab (chrome://chrome/extensions), and activating Developer mode:
Related
I am trying to inspect elements of a Form for an Apps Script. DevTools are available on every other page I load EXCEPT Google Forms.
I have searched in the devtools settings to find a blacklisted page, but nothing is there, also there is nothing in the registry for developer tools in the chrome folder.
I have found no solutions searching the internet for this, only general solutions when devtools is completely turned off.
I will add that I recently tried to use the "Dynamic Fields" add on for forms to accomplish the task of dynamic drop downs on my form before I decided to do it myself with Apps Script. This add-on probably does not want people peeking behind the curtain so they may have disabled the ability to see their code? Is this plausible?
This not only happens in google forms but also google classroom. Come to think of it, it looks like google is doing something with disabling Developer Tools on some of their sites. Others have complained that it is also disabled on their university/educational institution’s site. The main reason for this is to probably prevent “hacking” on these sites. Quick searches on google return almost no results on this phenomenon. It is definitely on a per-website basis, and probably not because of a local policy.
Update: If you are using Google Chrome as your browser, the devtools may not work on certain google products.
NOTE: This is for when individual webpages block inspect element, be sure it is enabled in the first place!
The Solution:
Use a different browser, as it seems to only happen on Chrome. (I used Firefox, but other browsers should be fine too.)
I'm doing a little research on how to develop a Chrome app for a project I have in mind. I would like to open my app in a split screen inside a person's browser tab, so that they can still see the webpage in the browser while interacting with my app. (In the same way that the console and developer tools work.)
Everything I've seen so far indicates that apps can only open a new window, not "split the screen". Is that correct? I haven't seen it explicitly stated.
If splitting the screen is possible - what's the notation/api?
The other option I'm aware of would be to create a DevTools extension (that operates in the Developer Tools split screen window.) I'm not sure that's preferable for this particular app, though
thanks.
Yes, this is correct. Chrome Apps cannot integrate with the browser UI, that's a design choice by Google.
If you need to interact with a browser tab, it must be an extension.
A DevTools panel is not a bad idea, since it frees you from the burden of injecting your own UI into the page. Otherwise, you'll need to modify the page's DOM (perhaps by injecting an iframe with your extension's page).
There is a proposal for a sidebar API, but it's not implemented (or rejected) as of yet.
The content script tab is useless, isn't it? How to hide it and show sources tab by default?
Unfortunately this is not possible unless you want to re-compile Chrome's proprietary code (if you can get it). You can do it with Chromium which is O/S.
That said, I find the content scripts tab useful when I SysAdmin Chromium browsers that have I have written custom content scripts for.
Early on I was doing some debugging and testing using the chrome dev tools(known as inspect element). I found out that on the Resources column of the dev tool, Chrome can always access the resources from the server and display them(links, videos, images....). Just wonder how Chrome does that. Is there any way to write a piece of code doing the same thing(access the server resources of other websites, not modifying them but displaying, stuff like, the link of the video currently playing on the website, which usually does not pop up until the play button is hit)?
DevTools doesn't fetch resources from a site. It fetches them from the browser.
There were similar questions already
How does webkit/chrome's WebInspector Resources Inspection work?
and
Getting Information from Google Chrome's Developer Tools
The Chrome Developer Tools has two parts frontend (html+javascript) and backend (C++) and there is an API which specifies the protocol between these parts. You can see the specification here. You can use it for writing your own app instead of standard DevTools frontend.
Also there is experimental debugging API for chrome extensions.
I think the Webkit WebInspector go over the hole source code and match all resources of the source.
So it match <link href="something.css"> and then it place something.css in the resource panel under stylesheets. And exactly the same thing for the other tags.
It's not hard to make regexes for this.
What is the difference between Chrome Apps and Extensions?
What can you do with apps that you can't do with extensions or vice versa?
Quoting from https://developer.chrome.com/webstore/apps_vs_extensions:
We’ve already had the concept of “web apps” in the browser for a few years, as something more rich and interactive than a website, but less cumbersome and monolithic than a desktop application. Examples include games, photo editors, and video players; all of these categories are viable as tightly focused apps running inside the browser. Google Chrome is just formalizing the web app concept in a way that will be familiar to anyone who’s used apps on a smartphone.
Extensions ... extend the functionality of Google Chrome and the websites being viewed in it. For example, they can extend Google Chrome by adding a new button to the address bar, such as an ever-present currency converter. Buttons like this can also apply to the current website being viewed—for example, click the currency converter button to convert all prices on the website you’re viewing. Similarly, you can introduce new items to the context menu, change the behavior of the omnibox (the input field on the address bar), access the user’s browsing history (with consent), and much more. You can alter web pages too—for example, embed a “mail this” button next to every link in every page, or customize the layout of your favorite website.
Compared to apps, extensions cut across websites and web apps; they are usually in effect across all websites (though some are site-specific). Apps don’t combine with other apps in this way; they run standalone, like any regular website.
(emphasis added)
From what I can tell, Chrome apps are just web applications that are registered with Chrome's Web Store (Gmail, e.g.). They're basically just glorified bookmarks. Google seems to have introduced them in order to make their browser more "operating system"-like, in preparation for tablets running Chrome OS. Since Chrome OS won't have any native applications apart from Chrome, they need some way for you to be able to "install" applications... even if those applications are just websites.
Extensions can actually affect the way that the browser behaves (ad blocking, e.g.). They can add buttons to Chrome's toolbars, intercept web requests, change the DOM, etc.
Here is an excellent resource from the Google Chrome team explaining the differences in detail.
It also contains a decision tree flow chart shown below.
Please refer to the following link:
(chrome app vs extension).
It basically says that there are two kinds of apps: hosted and packaged. Hosted apps are glorified bookmarks. But packaged apps provide you with a somewhat best of both worlds features- of both extensions and apps.
Extensions of course extend the core browser functionality providing little or no additional UI apart from what is already provided by chrome.
There are three Chrome distribution channels for developers.
In order of increasing functionality they are:
Chrome extensions — little to no UI
Chrome hosted apps
Chrome packaged apps
More information and fuller discussion is contained in this video.
quoting from http://www.chromeplugins.org/extensions/chrome-web-apps-extensions-spot-the-difference/
(as the explanation is very good)
Major Differences Between Chrome Extension and Chrome Web Apps
One of the major differences between Chrome extensions and web
applications is their location. Majority of the Chrome extensions can
be downloaded from Chrome Extensions Gallery whereas Chrome Web Apps
can be installed from Chrome Web Store.
Another major difference between Chrome extensions and web apps is the
fact that while extensions are used to enhance the functionality of
the Chrome Browser, web apps run within the browser having a different
user interface. Unlike web applications, extensions have little or
sometimes no UI component.
From a technical perspective the major difference between Chrome Apps
and extensions is the presence of “launch” parameter in apps which
indicates Chrome to show when user starts an application installed by
him/her.