We Keep Coding

Chrome extension - Document.getelementbyId(...) evaluating to null?

In console I can input document.getElementById('...') and get a value back. Or even .textContent and get the string I want.
Once I pop this into my chrome extension and run it, it evaluates document.getElementById('...') as null. What's up?
Manifest.json:
{
"name": "CSUF RMP",
"version": "0.1",
"manifest_version" : 2,
"description": "Displays professor ratings on icon click",
"background" : {
"scripts" : ["background.js"]
},
"browser_action": {
"default_icon": "icon16.png"
},
"content_scripts": [
{
"matches": ["https://mycsuf.fullerton.edu/*"],
"js": ["script.js"]
}
],
"permissions": ["<all_urls>", "*://*/*", "http://*/*", "https://*/*"]
}
Background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "script.js"});
});
My script.js is literally what I posted at the top. The script is supposed to have access to the web page's DOM (thus I need a content script) and run it on click of the icon (hence the background.js)
I can get the page to run and show an alert or something, but that line isn't evaluating the page's dom, just null.

I think I know what is the problem here,
you are executing script.js just like a normal script, and a normal script can't interact with the page DOM, you can think about it as just runing a script from a file- it don't have the content script's privileges that way.
What you can do is open a new tab (with the url of the content script), and then pass to the content script at that new tab a message which tells him to run a specific function there.
You can test it without using message sending by setting the onload of the content script to something like: onload=alert(document.getElementById('...')); and than open a new tab from the background page: chrome.tabs.create({"url":"https://mycsuf.fullerton.edu"});
tell me how it goes :)
Edit: forgot to mention that you need the 'tabs' permission in your manifest file in order to open new tabs and test the thing out.

Run the script only onclick on chrome extension

Whenever my chrome extension icon is clicked, I want to run a script that would make certain changes to the current webpage.
I have tried using content_scripts in my manifest and it worked but the problem is , the script runs even if I did not clicked on the icon.
I have found that, I need to use background script.In my background.js file I have added
chrome.browserAction.onClicked.addListener(function(tab) {
alert();
});
and it is not working.
Here is my manifest file.
{
"manifest_version": 2,
"name": "Reveal Password",
"description": "Reveals password in password input field",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": ["background.js"]
}
}
Plus I want to execute the script that I made that manipulates the current web page too.

Use chrome.tabs.executeScript() to execute code in a tab like this:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
code: 'alert("Hello")'
});
});
Instead of code, you could also use a file which contains the code :
chrome.tabs.executeScript(null, {file: "content_script.js"});
NOTE : You need activeTab permissions to execute code in an active tab
"permissions": [
"activeTab"
]

Can't trigger click with jQuery in a Chrome extension

I am trying to make a Chrome extension with one line of jQuery code but it doesn't work. I'm trying to trigger a click on an element.
The console of chrome doesn't show any error at all,
and when I put ONLY the jQuery code in console it works fine.
My code:
content.js
$(document).ready(function() {
$('.like_post:contains(Like)').click();
});
background.js
chrome.windows.getCurrent( function(currentWindow) {
chrome.tabs.query({active: true, windowId: currentWindow.id}, function(activeTabs){
chrome.tabs.executeScript(
activeTabs[0].id, {file: 'jquery-2.1.3.min.js', allFrames: true}
);
chrome.tabs.executeScript(
activeTabs[0].id, {file: 'content.js', allFrames: true}
);
});
console.log(currentWindow.id);
});
manifest.json
{
"name": "plugin name",
"version": "0",
"description": "What do I do as an extension",
"manifest_version": 2,
"browser_action": {
"name": "project with jquery",
"icons": ["icon.png"],
"default_icon": "icon.png"
},
"content_scripts": [ {
"js": [ "jquery-2.1.3.min.js", "background.js", "content.js" ],
"matches": [ "http://*/*", "https://*/*"]
}]
}
I have also downloaded the jquery-2.1.3.min.js file and have it in the extension folder.
Can anyone explain why it doesn't work???

The root cause of the problem is that extension content scripts execute in an isolated world. One of the reasons for this is so that your code does not conflict with the page's code: for instance, you can use a different version of jQuery.
So, your content script has its own copy of jQuery. The way jQuery's .click() works is by maintaining a list of event handlers that are triggered by the click..
..and you may see the problem already. The content script's copy of jQuery is not aware of the page's copy list of handlers, and cannot trigger them.
That, by the way, explains why it works when you put it in the console - by default, console executes in the page's context and triggers the page's copy of jQuery.
There are ways to overcome this, but the most straightforward for your task is to emit a proper DOM event, that will be caught by the page's code. See this question for an example.

Proper way to add HTML to the page and access Jquery as well as the users current tab?

I am trying to learn how to write a chrome extension. What I am looking for is the ability for to access the current page the user is on. I would like to append some of my own html to the current page the user is accessing. I then want to be able to see which element the user is currently clicking on the page.
I have figured out how to access the tab and run some javascript. But I am unclear how to append some HTML to that page. I also want to bring in jquery.
Here is what I have...
{
"background": {
"scripts": [ "jquery.min.js", "background.js"]
},
"browser_action": {
"default_icon": "icon128.png",
"default_title": "Test"
},
"description": "Make API's from regular websites",
"icons": {
"128": "icon128.png",
"16": "icon16.png",
"48": "icon48.png"
},
"manifest_version": 2,
"name": "Test",
"permissions": [ "tabs", "http://*/*", "https://*/*" ],
"version": "0.2"
}
Background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {file: "bookmarklet.js"})
});
bookmarklet.js
(function() {
console.log($('.stuff'))
console.log(document.getElementById('yt-masthead'))
//open('http://www.google.com/'+encodeURIComponent(document.location.href),'_self').focus();
}
)();
When I run the program I am finding that I do not have access to jquery. I thought adding it to background in scripts gives me access? I also am unsure how/where I would store the html I want to append to the tab.

First off, you can probably drop the scary permissions in favor of the activeTab permission.
Second, to have jQuery you need to inject it yourself before your other script. Since injecting is asynchronous, make sure you chain it properly:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {file: "jquery.min.js"}, function(){
chrome.tabs.executeScript(tab.id, {file: "bookmarklet.js"});
});
});
Third, you probably want to generate the requisite HTML using jQuery in your content script, bookmarklet.js. Or at least store it there in a variable. It's easier to do it on the content script side, but if you have to do it in the background, you should check out Message Passing.

Injecting Redirect JS in Chrome extension. Fail! :(

I'm trying to generate an extension that keeps my brother of facebook. So I decided i'll redirect all facebook links to google for starters.
This is how i went about it.
My manifest.json file :
{
"name": "FBRehab"
"version": "1.0",
"description": "Redirect FB",
"permissions": [
"tabs", "http://www.facebook.com/*", "https://www.facebook.com/*"
],
"browser_action": {
"default_icon": "icon.png",
"background_page": "background.html"
},
]
}
My background.html :
<html>
<head>
<script>
chrome.tabs.executeScript(null, { file: "jquery.js" }, function() {
chrome.tabs.executeScript(null, { file: "try.js" });
});
</script>
</head>
and try.js
<head>
<script language="JavaScript">
var time = null
function move() {
window.location = 'www.google.com'
}
</script>
</head>
Yet, it does not redirect. I've tried directly injecting the try.js using content scripts too.
Please help me.
Thanking you.
Ashar :)

Remember a Background Page runs exactly once in Chrome, it is a single long running script that runs exactly once.
Basically what your code does now is that once your browser loads, it will inject jquery and try Content Scripts to the current tab. You have no tabs that are currently loaded (which it will fail unless you have it auto load a tab). Then it will not do anything anymore because the Background Page runs exactly once!
What you need to do instead is use a Content Script which should be defined as follows:
// Only execute in the top window, we don't want to inject the iframes.
if (window == top) {
window.location = 'www.google.com'
}
In your manifest, you will have the following:
{
"name": "No more Facebook extension",
...
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["redirect.js"]
}
],
...
}

I think you want to use a content script instead of a background page. You can specify that your content script should only run on specific web pages.

Do you ever call move()? Doesn't look like it to me, but I've never developed a Chrome extension before... so I'm not sure if it is ever called automatically.