Develop Reference

Inserting Html, CSS and Javascript into the console to test a new block/feature

I have been tasked with creating a new feature/block of HTML & CSS that contains some light JS for controls (think a carousel). It is working as expected but two of the requirements are that it's one block of code and it can be run in the console and display on the web page(e.g. Chrome)
I have added the CSS and JS into the html file, so one block of code, I hope is solved, I then tried to create a little function using insertAdjacentHTML to run in the console but that doesn't work as it doesn't accept anything other than pure html (no class names or tags etc)
I do not have access to the source code of the website they want to test it on, so apparently it has to be done in the console.
I also looked at extensions, to see if I can work out how they do it but not having much luck, happy if someone can recommend anyway in which I can display this new feature.
I understand why they want to do it this way as they will want to do quick demos of new features built, but still an unorthodox method imo. Happy to be told wrong.
Any help would be great.
TIA
EDIT: JS file - https://github.com/morphey-slavbard/product_slider/blob/main/main.js
HTML file - https://github.com/morphey-slavbard/product_slider/blob/main/index_2.html

Run snippet of jquery code on a specific webpage from a local module

I have a short snippet of jquery code that I use to pick and submit a specific choice in a drop-down menu on a website.
For now, I've pasted the code into the console, but I would like to set up some form of simple local module with a button, that when clicked runs the jquery code on the specific website.
I don't know much coding aside from a bit VBA, so I'm unsure what's the best way to go about this. Intuitively, I imagine that it shouldn't be that difficult of a task, but I can't quite wrap my head around how I set it up and if it's even possible to click a button in a local module that then performs an action on a webpage.
Really hoping some of you might be able to give me some guidance. Any help is appreciated!
Best regards
Magnus

Ideally, I would like to do this in VBA, but i'm unsure if it's possible to run jquery scripts from VBA. I'm using Chrome Browser by the way.

Webbrowser control onclick event

I have a code that clicks an html element but it doesn't fire its java script code, in VBA I used to call "initEvent" in order to invoke a java script event.
I have searched the web and haven't found a suitable solution.
There's a working solution, but it's not quite useful in most cases, placing a java script code in the url and navigating to it, however there's a need for the location of the html element which is a problem sometimes.
The code I use in order to do a click in the html element :
el.InvokeMember("onclick");
Also tried :
el.InvokeMember("click");
The code that I place in the url and find not too much useful :
wb.Navigate("javascript: document.getElementsByClassName('something')[0].click();void(0);");
I hope to receive a working solution, thanks in advance.

I've solved it, a very original solve I'd say.
So basically, I've thought about it this way.
Finding an element that I already have is not comfortable at all, so the java script navigate didn't seem useful, however, I thought of changing it to fit any element, the question was how.
The answer I came up with, what if I'd focus the specific element and then use a javascript to click on the focused element, and it worked.
So the fixed code :
el.Focus();
wb.Navigate("javascript: document.activeElement.click();void(0);");
I hope it'll be useful to some of you.

Add javascript to cover page button

I have a button on my cover page and I need to assign to it 1 line of javascript code (namely javascript:languageClicked(0); to work with this neat addon: Multilingualizer) .
So the button should execute that line of code and do its usual job, namely to send the user to my main webpage.
thx in advance

Is the languageClicked function code from Multilingualizer? If so, maybe that addon isn't enabled correctly on your page or something and the js files for it are not being loaded.
But, once they are loaded. You can replace your button with this code:
ENTER
Screenshot
Since you want the user to be redirected to /expnew after activating languageClicked.
Hope this helps! Also, there is one catch though; don't change this unless you know for sure you have those JS libraries loaded. ^_^

Without some HTML snippets and the name of the button you are working with, it is hard to know exactly how to help. However, I can share some general knowledge that may provide the answer for you.
The two most common ways that JavaScript triggers are implemented are:
1. <a> "link buttons":
Your code might look something like:
Click me!
2. <input>/<button>/any element onclick events:
Your code might look something like:
<button onclick="javascript:languageClicked(0)">Click me!</button>

Google Chrome Extension

I have a few questions that need answering. I am trying to create a Google Chrome extension and I need every page to be monitored for a keyboard action. I have added a content script that runs on the page load and when you click the keyboard shortcut an alert is shown.
What I want to do is instead of an alert have something like fancybox, thickbox, etc... however all of those are jquery plugins which adds a dependency to my js file. I tried launching the plugin before my js file but it still does not work.
I run the content script from the manifest.json file with
"content_scripts": [
{
"matches":["http://*/*", "https://*/*"],
"run_at":"document_start",
"js":["jquery.simplemodal.1.4.1.min.js", "shortcuts.js"]
}
],
I cannot execute an HTML page where the js is located I have to use a js file.
so what I want to know is if either there is a way to include the plugin without physically adding it to my file or if there is a way to call the js file which then just executes an HTML file or if there is another way of creating a popup screen like fancybox that is already included in js.
Another question I have is if there was a way to embed HTML into an alert box (this is a backup if I cannot figure out the above question)
and finally does anyone know of an execution command for x-webkit-speech? I want the command to start recording and somehow some people have used some commands (none of which answer my question) so someone somewhere knows a little more about this function then me. I would really appreciate help with this I am really close to finishing my program and these are my last holdups with these questions answered I will be able to release my extension. Please help where you can I have researched and researched everywhere all different ways of trying these things and none have worked.
edit:
You were correct (JHurrah) including the jquery actually solved the problem I really appreciate that. simple yet successful I just assumed the jquery provided was enough but I guess everyone knows what happens when you assume especially when programming.
NewTang I have already looked at that website however I will relook at it and see if I missed anything thanks for the help
yeah see I don't have that I have link edit and flag I looked all over and did not see an add comment button at all... :[

since simplemodal is a plugin it depends on jquery, try including jquery in your manifest before the other scripts.
"js":["jquery-1.5.2.min.js", "jquery.simplemodal.1.4.1.min.js", "shortcuts.js"]

I"m a little confused by your question, but I'll give it my best shot.
1) I think you're trying to ask: Can I use a content_script to inject HTML. The answer is yes, but only through Javascript. So, you could have something like:
//using jquery
$("body").append("Hi, I'm on the bottom of the page");
Your javascript would have to create or load the HTML that would get inserted into the page.
2) No, no HTML in an alert box. You're on the right track with using lightbox, thickbox, etc.
3) There's not many resources on x-webkit-speech, but maybe this can help you get going: http://nooshu.com/experimenting-with-webkit-form-speech-input