I’m creating my first chrome extension. My aim is simple, on a certain webpage, I want to hide an element with id someid.
I’ve created a background page, which for now selects the element with id someid
and alerts it to the screen. Problem is, the value of ele is null.
Tried $(“#someid”).hide(); as well, no luck.
Is there something special I need to do to interact with the DOM in a tab? I alerted
tab.url and that shows the right url.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
<script>
$(document).ready(function(){
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
if(changeInfo.status == "complete")
{
if(tab.url.indexOf("somedomain.com") > -1)
{
chrome.tabs.getSelected(null, function(tab){
var tabUrl = tab.url;
chrome.tabs.executeScript(tab.id, {file: "background.js"},function({
var ele = document.getElementById("someid");
alert(ele);
});
});
}
}
});
});
</script>
</head>
<body></body>
</html>
As Stan pointed out, the problem was improper context. I used a content script and that fixed the problem. thanks!