Develop Reference

How do you run a Js file on any site?

I want to automate something on a website that I don't own. It has to fill out a form automatically and do some clicking actions. Will I be able to do this with JS? Because I don't understand how you can run a .js file on a site without the html tag inside the html code. I can use the console on the site but I want it to look good and clean for users.
Thanks in advance
edit:
So it should look something like this:
An user should be able to select an item in an UI
Then it will automatically search the item on the website.
It will select the item in the right colour and size and add it to the basket.
Then it will checkout (fill in the form and pay).

Are you trying to automate actions?
Maybe selenium will work better.
Selenium has the capability of do those task.. like fill forms, click buttons, hover on elements and more.
Selenium python

You can create a very simple extension:
You will need two files:
yourCode.js // Here goes your code
manifest.json // Here you target the page
Here is what you should put in manifest.json:
{
"manifest_version": 2, // Mandatory
"name": "Auto-submit form", // Mandatory
"version": "1.0", // Mandatory
"content_scripts": [ // This key injects your js file into any target website.
{
"matches": ["your target url"], // Pattern: "*://*/*"
"js": ["yourCode.js"]
}
]
}
And your code resides in yourCode.js:
//Here Goes your JS logic.
Now you have your extension and can install it on your desired browser.
In Firefox go to about:debugging > This Firefox > Load Temporary Add-on
In Chrome go to chrome://extensions > Developer Mode > Load unpacked extension.

A console will be the best solution for your problem as console will show you How exactly your .js code will look like. Kindly elaborate your purpose for a better understanding of the question.

How do I debug JSP-embedded JavaScript in FireFox debugger?

I am using the FireFox debugger to debug an app that contains both .JSP files and .js include files. The debugger lets me put break points in the .js files, but NOT in the JavaScript/JQuery that is in the .JSP files that call the .js files. Debugging is not entirely useful unless I can put breakpoints in ALL the files that contain JavaScript and JQuery code, no matter what file extension is attached to each file.
How can I get FireFox to include the relevant JSP files in the list of files to which break points can be added?
For example, the file somejsp.jsp contains the following script element:
<script language="javascript">
function someMethod(someArgument) {
document.forms['someForm'].elements['someElement'].value = some.element;
//some other JavaScript code
}
</script>
Rest of JSP file...
If I take #charlietfl's suggestion and add the debugger command, where and how do I add it?
I made a first attempt to write it as follows:
debugger document.forms['someForm'].elements['someElement'].value = some.element;
But when I try to run the code, the browser gives an error alert saying that someMethod() has not been implemented. So it seems that adding the word debugger in the way shown above causes the method to become invisible to FireFox. How can I correctly add the breakpoint?

This can be achieved in Chrome browser.
You need to enable the below setting in DevTools first:
Navigate to Settings > Preferences
Check Search in anonymous and content scripts under Sources section
Now Navigate to your page as usual, right-click and open DevTools. Select Search tab at the lower part of the DevTools window and enter keywords specific to the text in the JavaScript code that you're trying to search.

How to access iframe in popup.html in a chrome extension

I have a chrome extension that opens a webpage via an iframe inside it's popup.html
What I need to do is detect when the user browses to certain URLs in the iframe, and then open those URLs as a new tab.
I was trying to access the .location of the iframe, but unfortunately was getting the policy issues between "chrome-extensions" and "http"
I've been researching, and I'm seeing a lot of notes on using content scripts, but I'm really not understanding how they work fully. Most examples are trying to inject code into current pages in the browser itself so I don't think they apply. Is a content script what I need?
Any help would be most helpful.

No this is not possible as chrome-extension popup is different domain site you cannot access it within your site.

I've been trying to do the same thing and i found this answer on SO. This worked for me and may be can work in our case as well. Just in case if the link may stop working in future, i'm copying his answer here:
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"js": ["content_frame.js"],
"all_frames": true
}],
By setting all_frames to true you will inject/include content_frame.js javascript file into top document and all iframes. In case you just need javascript injected in iframe but not in top document you can check inside your content_frame.js file like this:
if (parent === top) {
// here you can put your code that will run only inside iframe
}

Getting url and content on EVERY page from Chrome extension

First of all, all the answers will be much appriciated, as I'm running out of my own ideas.
I have a "simple" problem to tackle. I wanna do a chrome extension, which would basically track the websites you're visiting (with content included). To clarify, we have full consent of the users to do this. :-)
What I did so far, isn't working well (I've tried to use many of the hooks provided by chrome API, ie chrome.webNavigation.onCommitted, chrome.webRequest.onBeforeRequest, chrome.webNavigation.onCompleted, chrome.webRequest.onBeforeRedirect, chrome.history.onVisited).
The best option so far is to use chrome.history.onVisited, but then again, I've no idea how to get website content from it - I've tried to execute content script which returns document.documentElement.outerHTML, but in order to do so I need to know tabId, which isn't available there.
Basically, something is messed up in chrome API or my thinking - probably the latter :)
I want to point out, that it almost works, but not on all cases. It's hard for me to debug which cases fail though.
Thanks a lot for all the tips I can get!

Based on your clarification in a comment I could suggest you to use content scripts and message passing.
At the moment when the user press "start recording" button you can - from the background page - execute content script which will intersect content of the pages already opened and then will send it back to the background page for further processing (save possibly). You can query for all tabs in any window using chrome.tabs.query function:
chrome.tabs.query({}, function(tabs){
console.log(tabs); //tabs array contain all tabs in all windows.
});
Iterating over this array you can execute script in all tabs using it's tab.id:
tabs.forEach(function(tab){
chrome.tabs.executeScript(tab.id, { 'file': 'cs.js' })
});
Then you can attach event handler to listen up for changes in tabs:
chrome.tabs.onUpdated.addListener(function(change){
if(change.status === 'complete'){
//inject content script
}
});
Second scenario is to add content script to every page user visits adding proper manifest entry:
...
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["cs.js"]
}
],
...
After cs.js load you can call background page and ask it if the extension should capture page content (using messaging passing). If yes - do the same as above, if not, just do nothing.
It is the easiest and most convenient way of doing what you need.

Searching and highlighting text on current page for a Chrome Extension

How should I connect my pages to search and highlight text on current tab?
Currently I have:
manifest.json does defining content/backgr/event page do significant things,auto inject code etc?
popup.html essentially a shell for the search input which is used by search.js
search.js should this be in background/event/content/popup.html page?
What I still don't understand after reading:
What is a content page vs. background/event page?
I know one is constantly running vs injected, but that's as much as I got from the chrome extension manual, I still don't quite understand if the content script/page is seperate from the popup.html for example and what the difference between a script in the popup.html vs content page/script is.
What I know:
I know how to search for text on a page, and replace it or change its style etc. using JS.
I need to read up on the messaging API for Chrome Extensions.
I know I need to know how to use the messaging API, is it going to be required for page search and highlighting?
Summary:
I don't need a walk through or full answer, just a little help visualizing how Chrome extensions work, or at minimum how I should set mine up in relation to page interaction IE:
search.js content page injected >>>>> popup.html
and maybe a short bit about how injection works in chrome extensions(IE, do I only need to specify that it is content page in manifest.json to have it injected or is there more work to it)/expected behavior?
Apologies for the jumbled thoughts/question/possibly missing the things relevant to my questions while reading the manual.

I will start with making the purpose of each kind of page/script more clear.
First is the background page/script. The background script is where your extension lives. It isn't required, but in order to do most extension things, you need one. In it you can set up various event listeners and such depending on what you want it to do. It lives in its own little world and can only interact with other pages and scripts using the chrome.* apis. If you set it up as an event page it works exactly the same except that it unloads when not in use and loads back into memory when it has something to do.
Content scripts refer to injected Javascript and/or css. They are the primary tool used for interacting with web pages. They have very limited access to chrome.* apis, but they have full access to the DOM of the page they are injected into. We will come back to using them in a minute.
Now for Popup pages. Unlike the background script and content script, popups have both a HTML and JS portion. The HTML part is just like any other page, just small and as a overlay popup coming out from the icon. The script portion of it, however, can do all the things the background page does, except that it unloads whenever the popup is closed.
Now that the distinctions are more clear let's move on to what you want to do. It sounds like you want to open the popup, have the user enter text to search for in the current tab, then highlight that text on the page. Since you said that you already know how you plan on highlighting the text, I will leave that part to you.
First to set up our manifest file. For this particular action, we don't need a background script. What we do need is both the "tabs" and "activeTab" permissions. These will enable us to inject our script later. We also need to define the browser action with it's popup. Altogether it would look something like this:
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs", "activeTab"
]
Now in our popup.html file, we can only have markup and css, no inline code at all. We will put it all in our js file and include it. Something like this should work:
<!DOCTYPE html>
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
<input type="text" id="searchText">
<button id="searchButton">Search</button>
</body>
</html>
This is where we come back to the content script stuff. There are two ways to inject a content script, first is to define it in the manifest. This works best when you always want to inject it for a particular set of url's. Second, to use the chrome.tabs.executeScript method to inject it when we need to. That is what we will use.
window.onload = function(){
document.getElementById('searchButton').onclick = searchText;
};
function searchText(){
var search = document.getElementById('searchText').value;
if(search){
chrome.tabs.query({active:true,currentWindow:true},function(tabs){
chrome.tabs.executeScript(tabs[0].id,{file:search.js});
chrome.tabs.sendMessage(tabs[0].id,{method:'search',searchText:search});
});
}
}
With this, we have successfully injected our script and then send the search text to that script. Just make sure that the script is wrapped in a onMessage listener like this:
chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
// message.searchText is the text that was captured in the popup
// Search/Highlight code goes here
});
And that pretty much sums it up. With that, you should be able to get it working. If something is still not clear let me know and I will fix it.

I think what's confusing you is the non-existant concept of a "content page". There is no such thing. What you're likely referring to is a "content script". Let me explain the three main components of an extension:
Background Page
As you said, this is the persistent aspect of a Chrome Extension. Even though it can be HTML page it is never rendered. You simply use it to run JavaScript and other content that stays persistent. The only way to "refresh" the background page is to refresh the extension in the extension manager, or to re-install the extension.
This is most useful for saving information that should remain persistent, such as authentication credentials, or counters that should build up over time. Only use the background page when absolutely necessary, though, because it consumes resources as long as the user is running your extension.
You can add a background script like to manafest file like this:
"background": {
"scripts": [
"background.js"
]
},
Or like this:
"background": {
"page": "background.html"
},
Then simply add background.js to background.html via a typical tag.
Popup
This is what you see when you click the icon on the toolbar. It's simply a popup window with some HTML. It can contain HTML, JavaScript, CSS, and whatever you would put in a normal web page.
Not all extension need a popup window, but many do. For example, your highlight extension may not need a popup if all it's doing is highlighting text on a page. However, if you need to collect a search result (which seems likely) or provide the user with some settings or other UI then a popup is a good way to go about this.
You can add a popup to the manifest file like this:
"browser_action": {
"default_popup": "popup.html"
},
Content script
As I mentioned, this is not a "page" per se -- it a script, or set of scripts. A content script is what you use to infuse JavaScript into pages the user is browser. For example, a user goes to Facebook and a content script could change the background to red. This is almost certainly what you'll need to use to highlight text on a page. Simply infuse some JavaScript and any necessarily libraries to search the page or crawl the dom, and render changes to that page.
You can inject content scripts every time a user opens any URL like this:
"content_scripts": [
{
"matches" : [
"<all_urls>"
],
"js" : [
"content.js"
]
}
],
The above injects "content.js" into "all urls".
You'll also need to add this to the permissions:
"permissions": [
"<all_urls>",
]
You can even add JQuery to the list of content scripts. The nice thing about extensions is that the content scripts are sandboxed, so the version of JQuery you inject will not collide with JQuery on pages the user visits.