For example, on page I have a button, which causes to fire XYZ function (which is already loaded inside namespace in external JS).
However, I wanted there to change only one function in that script only (not page), and reload that script again, so, that the BUTTON will fire the modified function..
How to do that?
Shouldn't be a problem.
You can use the console to redefine the function.
Just click F12, go to Console,
then type in your edited function and click enter.
Then click the button and the modified function will be executed.
Note When editing the function from the console, make sure that you are in the right context:
If you type the function name and get a function this means you can edit it. If you get undefined, this means you are not in the right context and should change the scope in which the function is defined in.
You can change scope in Chrome's console if needed by using this dropdown (for example when the code is run from an iframe):
Related
Pre: I'm in chrome and logged in
I launch (click on) my popup window. It saves some data in all storages (windowlocal, windowsession, google local and google sync)
I right click on it, and choose inspect.
The dev tools window comes up for the popup
I look in Storage Explorer in Dev Tools, I see all my data is there, in all storages.
I put a breakpoint at the start of my popup.js code. This breakpoint is before it loads any data or does anything. It's at the beginning of the constructor.
I hit F5 on the Dev Tools window. It flickers and comes back
Expected Result: I see all the data I've saved
Actual Result: No data whatsoever is there, in any of the storages. It's all gone.
What am I doing wrong? Is popup not supposed to be able to save data?
Issues
If you put a breakpoint in the constructor of an extension on dev tools, it's likely that storage explorer won't show anything, because it hasn't loaded yet
In my constructor, I was loading the settings correctly from storage, but then immediately overwriting them with the default values because I was calling load() first, and it had become asynchronous, and further down in my code in my settings property setters were re-saving the default values, so by the time load() resolved itself to execute, it was just reading the (just) saved default values.
Solution
I brought the load code out of the constructor into an async function, and called that function right at the end of my constructor. In that function, I used await to make sure the settings were loaded from storage, then continued to set the settings properties.
I have been going around in circles with this, so I would appreciate some help
This is what I want to achieve
User presses my extension ison
Popup appears with two buttons, 'run function a' and 'run function b'
When they press a button it runs the function in my own js file, that I have injected.
Function a for example, could be to count the number of elements of a certain type in the active tab
So, I can inject my js file on page load (this is in my contentscript.js)
var s = document.createElement('script');
s.src = chrome.extension.getURL('temp-file.js');
s.onload = function() {
this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);
This works, and I can see the js being excuted
But what I can do is to have a function run that is in temp-file.js
For example in the popup I have
chrome.tabs.executeScript(null, {code:"shows();"});
I get this: Uncaught ReferenceError: shows is not defined
If I enter shows(); into the console, it works as expected
I presume that the issue is all about the context. I tried various things in the popup.js page to also inject the file but nothing seemed to work
Is anyone able to point me in the right direction please
Thanks
Grant
I presume that the issue is all about the context.
You're right about it.
The file "temp-file.js" has been injected into host page, so it is now part of host page context. Extension can mess with it - since it is in different context.
Run a function from injected js
Solution:
Not sure about what you are trying to achieve. pick what suits you:
Split injected file
Code/functions you want to execute on a page - use them as contentscript.
In this case split you "temp-file.js" - part extension has execute (becomes part of contentscript) and part host page has to execute(your code snippet).
use custom event
Use custom event - generate custom event in contenscript - listen for it injected script. custom event
Your question does not say what exactly you are trying to achieve.
This is what I understood. You want to execute a function on your contentscript.js from your popup.js.
If that is the case then you can call a method on contentscript from popup.js like mentioned here https://developer.chrome.com/extensions/messaging
My Chrome extension has a background page that execute script on current tab.
The script change elements on current tab by adding code to existing elements to call function 'myFunction' defined at background page when 'onClick' events occur.
The problem is that exception is thrown that 'myFunction' is not defined on current tab.
what is the best way to enable this interaction? to enable current page to go to function defined on background page?
Thanks in advance!
The background page is executed in an independent context, and thus its functions can't be directly executed in the currently opened tab.
What you need is a content script executed on all the tabs, that then communicates with the background page, using the message passing mechanism.
Without more information, it's difficult to help you more.
As mentioned in the first answer, "Without more information, it's difficult to help you more.", but for your second question it sounds like what you need is a reference to the function defined in your background page. This can be achieved with the getBackgroundPage function. The code looks like this;
var bgPage = chrome.extension.getBackgroundPage();
bgPage.myFunction();
I'm writing a chrome extension that needs to do some work when the user submits a form. I've got a content script running in the background that runs the following code:
$(document.body).on('submit', 'form', function () {
doWork();
});
That works perfectly on most sites, but breaks on the login form of twitter. Oddly, though, it doesn't break entirely. If I click the 'Sign In' button on twitter, the doWork() function will run. However, if I press enter to submit the form, doWork() never runs.
In my efforts to debug, I then copy and pasted my code into dev tools to rebind the function, and see if it worked. It did - even when using enter, the new binding worked.
My next thought was that maybe jQuery.on wasn't working on elements created via javascript (assuming the button submitted a hidden dynamically-created form via javascript, rather than the visible form, for some reason). So, I rebound the event like above, but added in a line that would alert me with the class name of the submitted form - all of the forms have unique class names on the twitter login page.
As you may have unfortunately guessed, clicking 'Sign In' vs. pressing enter alerted with the same class name - so, no matter which way I look at it, I have an event bound to that form submit, but for some crazy reason it is not getting called when I press enter.
I've set (and confirmed in the database) nodes under the content type miniapps to have the alias content/miniapps/9999/test (where 9999 is a node's actual id, and test is the node's title. Everything works fine when a new node is added - i.e. I get redirected to the proper page. However, when I edit that page and press Submit, I get the "page not found" error. If I manually enter the above path in the browser I go to the proper page. This happens even though every conceivable permission has been set, and in fact happens on my (the super admin) content. Any guidance or suggestions on why the wrong redirect appears to be assigned by the form submit button handler. Thank you very much.