How to not make a chrome extension onclick - javascript

Ok So I converted a bookmarklet to a chrome extension and, basically what happened was that I had to click the chrome extension icon to activate the bookmarklet. So my bookmarklet shows an alert whenever a website with the word 'unblocked" and that won't work, because I don't want it to be on click.
chrome.browserAction.onClick.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {file: "bookmarklet.js"})
});
ok so how would i make the chrome extension just run in the background without clicking the icon

Your question is ambiguous. From what I understood, you might want a content script which can read/modify the content shown by a page. You can use the matches property to specify URLs on which the content script will run.

Related

Chrome Extension: If my app does not have a default_popup set then I am not able to view Inspect Popup. How to debug?

If my Google Chrome extension does not have a default_popup as I need to use chrome.browserAction.onClicked.addListenerwhich is not called if the property 'default_popup' is set in mainfest.json file.
Problem
As shown in screen shot given below the inspect popup is disabled which is the key to open the dev. console for the extension.
How to debug?
Open the Extensions page of Chrome (chrome://extensions/), and enable developer mode if you haven't done so already. Click the link next to "Inspect views" to inspect your extension's background page.
Note that your extension's background page is not the same thing as its popup. Inspecting the popup and the background page of an extension that has both will give you two completely different inspectors!
Each html page your extension loads needs a separate devtools instance.
You can find all inspectable views at "chrome://inspect"
If you want to break on uncaught exceptions and the devtools are not opened yet, you can use a function wait_for_devtools to delay your startup function (e.g. after window.onload or document ready)

Javascript redirecting on everypage can't remove

I have a javascript file that was accidentally added to the admin side of our site. The javascript is below,
<script>
if (document.getElementById("errorTitle") != null && document.getElementById("errorTitle").innerHTML === "Insufficient Privileges") {
window.location.replace("/portal/InsufficientPrivileges");
} else {
window.location.replace("/portal/FileNotFound");
}
</script>
The problem is that this code runs on the admin pages so we are unable to remove it. If we disable javascript on the browser the page never renders, dynamic content. How can we disable this from running so we can upload the proper file?
You might be able to edit the page that contains the reference to the problem file. If you can just edit the page to jump over where that code is called with an if statement or goto.
If you can't edit the other pages then you can Use the debugger to change the code executed on the fly. Chrome and Firefox have debuggers that should be able to do this.
Specifically for Chrome you go into the object inspector (available via menus or right clicking on the page). Then you can see the HTML on the left window. You select the script tag of interest, you can right click and select delete or select "Edit HTML"
If the page redirects you before you're even able to edit anything, you can use automated tools.
Fiddler (Windows)
Fiddler lets you see all pages downloaded, and then you can have it send your browser a different page when it tries downloading any page you specify (AutoResponder feature). This way you can temporarily edit a page while you can fix it in the admin panel.
Greasemonkey (Firefox) or Tampermonkey (Chrome)
These plugins let you run JavaScript code on a page as soon as it gets to your browser. This will let you do things such as removing the script tag programmatically.

Best way to debug from Google Chrome console the .js file if it is loaded and executed AFTER button is clicked

Let's say the page http://www.example.com is opened in my browser. I click on the button button1 on that page that triggers
$('.popup').load(popupContentURL);
to be executed.
The new content is displayed in the popup. Everything is perfect.
The question is: the page popupContentURL has such a code inside:
<script type="text/javascript" src="jspopup.js"></script>
As result, when you click on the button button1, the javascript code from jspopup.js is being loaded and executed.
My question is: is there any way to debug jspopup.js from the Chrome console?
I wish to start debugging from the very first line.
The problem is that when I'm on the http://www.example.com and on the way to click the "button1" button, I can NOT set up a breakpoint inside the jspopup.js as it is not loaded yet.
All that files are not local. They are located at http://www.example.com .
Yes you can very well do that . The Chrome DevTools include a number of useful tools to help make debugging JavaScript less painful. Check here
In Chrome you can use the debugger; statement within your loaded code.
If you have the Chrome F12 developer console open it will break at that line so you can debug from that point onwards.
Lots of other useful tips here: https://developer.chrome.com/devtools/docs/javascript-debugging

Extension .js files don't show up in Chrome debugger

When I right click on the icon for my extension-in-development and click Inspect Popup (or when I click the icon and choose "Inspect Element") and look under the "Sources" tab, my .js file is nowhere to be seen - only a long list of inspect-able files like apitest, devtools, json_schema, etc. I can, however, find the code through the Elements tab by following the link in the .html file, but that doesn't bring to anywhere where I can actual debugging.
I've also loaded the "Hello, world" extension that Google's tutorial provides, and when I Inspect that one, its .js file is right there. I can't imagine what I've done differently from the tutorial example to cause this.
It's Chrome version 22.0.1229.94 run in a Linux VM. If there's any more information I should be providing, please let me know.
Type location.reload(true) in the console.
http://developer.chrome.com/extensions/tut_debugging.html
If I understand your question right,
Under the sources tab, there are two more tabs, one says Sources and the other says Content scripts. You need to click on the content scripts tab, and there you will find what you are looking for.
Okay So I figured it out, simply click on you extension icon, and a little dialog will pop up, then right click on it and click on inspect element. You can figure it out from there I reckon. (My other answer would be good if it was a content script, but this is a popup script.)

Colorbox not working in some pages (added by Chrome Extension)

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!

Categories