I'm working on a chrome extension that allows you to hide threads from a message board. I have it working, but the "Hide Me" link flickers into existence after the page loads. It works fine, but I'd like to load the link along with the rest of the DOM and not appear after the page load.
I tried adding "run_at": "document_start" to manifest.json, but it prevented the Hide Me link from even rendering.
$('a.topictitle').after(" | <a class='hideMe'>Hide Me</a>");
$('.hideMe').on('click', function(){
var thread = $(this).closest('li')
console.log(thread)
thread.remove()
});
Is this possible, or do I just have to deal with it happening after the fact?
According to this answer, $(function(){}) runs when the DOM is ready, so try that out.
=edit There's also document.addEventListener("DOMContentLoaded", function(event)
Related
I am trying to make a chrome extension that can edit and remove parts of Javascript of a webpage preferably before the page is loaded.
For Example, the following script tag is within my test html website.
<script>
document.addEventListener("visibilitychange", onchange);
function onchange(){
console.log('left');
}
</script>
This code tells the console when the user switches tabs. I would like to be able to edit this specific code only to prevent this from happening. Can I modify the text of JavaScript before runtime?
You cant modify the code before runtime but you can remove the event listener.
removeEventListener("visibilitychange", onchange);
Note: You technically can edit JS before it's executed in Chrome using LocalOverrides however it requires you to have your devtools open on page load.
I am struggling to access the DOM of the web page for my Chrome Extension.
In one extension I made, my extension parses the DOM from the content.js file without issue. This happens as the page loads. The user does not need to interact/open the extension at all, it just needs to be running in the backgorund.
Now I'm trying to trigger this from a button. This means the user will click the extension icon in the browser, and the popup.html will show some HTML (including the button).
This is where the problem lies for me. When I now try access the DOM (via click event of the button), it shows the popup.html's DOM, not the web page (The active tab).
So, a quick look through the docs (which I'm open to admit I struggle with) show that it could be a permissions issue. In my manifest.json file, I added
"permissions": [
"activeTab"
],
This didn't help :(
So in this new extension, I'm not using the background.js nor content.js .. I guess this is the problem, as the javascript I'm calling is embeded in the HTML pop up! This makes sense to me (as to the behaviour I'm getting).
How do I access the DOM of the active tab from the HTML pop up
The only way of accessing a page's DOM is by using a content script. Since you've set the activeTab permission you can use chrome.tabs.executeScript to inject a content script into the active tab by omitting the first parameter (the tabId).
Here is an example:
chrome.tabs.executeScript({ file: "content.js" });
I have had this same issue, I click on the button to open an popup, then how do I access the contents of the popup. Yes, you will need to use content scripts, but a trick I done to accomplish this, was when the popup is open, use window.name and get the name of that window. Then you can reference that popup window by var test = window.name('', 'name of that window'). Then you can reference the dom elements of the popup from test. Worked for me, let me know if I need to include some code to better explain.
i've been working on a Google Chrome extension that add's a button on the webpage, and this button opens a colorbox with a page of the extension loaded.
I have this code:
jQuery('#Link').click(function() {
alert("click");
logClrBox = jQuery('#Link').colorbox({
iframe:true,
width:'800',
height:'560',
});
});
My problem is, sometimes the alert is shown, but sometimes the alert is not shown and the link goes directly to the webpage on the "href" attribute.
To add the button, i use this on a content script:
$("form").append("a element")
with no onclick function,only the href.
My first idea is that some pages have jquery also loaded, and this may cause a conflict, but i can't see any error on the console. Maybe it is the problem? In any case, how can i solve it?
If is not a conflict, any idea why i can't get it working?
Thanks!
I've written a simple bookmarklet that opens multiple web pages with a single click:
javascript:(function(){window.open("http://www.w3schools.com");window.open("http://www.google.com");window.open("http://www.yahoo.com");})();
I wan't to be able to open the browser and click this immediately, but the bookmarklet won't work unless a page is already loaded in the window. I prefer to have my browser home page set to "Blank" for speed. Is there a way to make this bookmarklet execute without a page already loaded?
Also, I'd like the bookmarklet to replace whatever page is loaded in the window, if something is indeed loaded. At present, it opens 3 new tabs. I've tried the "_self" and "_parent" values for the "name" attribute on the first window.open, but it doesn't seem to work. I may not be formatting it correctly.
Any help is appreciated! Thanks!
It isn't possible to open bookmarklet in no page.
Instead, you can try to set your homepage to something like data:text/html,Welcome! (yes, it IS a working URL).
To open a page in the same tab, type:
location.href='http://www.w3schools.com'
I was having the same problem, and learned from the internet that if you go to your about:config, search for browser.newtab.url and change it to about:blank instead of the default about:newtab your javascript bookmarklets should work (just tried, and it's working!). This should be cleaner than doing a data:text/html message (in any case even if you set the homepage it doesn't work for every new tab, only once for a new window)
I have a link in a mobile webpage that needs to track an advertiser clickTag and then activate click-to-call.
I've got the tracking working but I don't know how to trigger the tel:1800123456; with javascript. Any ideas? This is not a web app; it's a standard html page. I can use jQuery.
Update
Just calling window.open("tel:num"); after adding a tracking iframe on click was not reliable enough because sometimes the call dialog box would open before the iframe had finished loading.
window.open("tel:num"); also opens a new window then opens the call dialog box, which isn't a great user experience on iphone 3gs/4.
Do you have any control over the tracking iframe? If so, you could call a function which makes the window.location call once it's loaded. Something like
$(document).ready(function() { window.iframe_loaded(); });
in the iframe code (if it has jQuery), and a function in your main script called iframe_loaded which does the window.location call.
If you can't set the code within the iframe but can edit the iframe container code, then you could do this...
<iframe id="whatever" onload="iframe_loaded();" width="400" height="200"></iframe>
...so the onload calls iframe_loaded() which does window.location...
If you don't have control over the iframe or its content, then easy kludge would be to just wrap the window.location call in a timeout, i.e.
setTimeout('window.location="tel:18001234567";', 500);
The 500 at the end will delay it by half a second. (Increase it if your iframe is slow to load.) It's not as elegant, but might work fine and users probably won't notice a small delay!
Have you tried window.open(url); where the url is "tel:18001234567" ?
Seems like that should work, right?