[Chrome extension] Inserting HTML in the DOM of the page

[Drown]

Hello everyone,

 

I'm currently working on a little chrome extension that will facilitate my browsing on some forums. It's pretty simple, there are a few buttons, and when I press them it will insert some HTML into the <textarea> of the page. It will allow me to quickly type "prepared" responses, which is very useful on a forum that I'm moderating. (it's tedious to post the same warning message 10 times a day)

 

I have my extension working, but I can't figure out how to insert the HTML into the DOM. I watched a few tutorials on how to make these extensions, but most of them are outdated and it has changed since then.

 

I tried adding jQuery (in the head of my main HTML file), but I don't know how to manipulate the data that is on the targetted page and not on the chrome extension page itself.

(for instance, the background page - ex: linustechtips.com - and not the main extension page - ex: extension.html)

 

Could anyone link me to good, up to date tutorials on how to do that? It probably won't be a direct tutorial on how it's done, but anything that is recent and that shows the basic of chrome extensions will do.

 

Thanks all for your help!

 

@linusforsell (I saw your amazing extension for LTT forum, you seem to know your way around these ^^)

[linusforsell]

Hello everyone,

 

I'm currently working on a little chrome extension that will facilitate my browsing on some forums. It's pretty simple, there are a few buttons, and when I press them it will insert some HTML into the <textarea> of the page. It will allow me to quickly type "prepared" responses, which is very useful on a forum that I'm moderating. (it's tedious to post the same warning message 10 times a day)

 

I have my extension working, but I can't figure out how to insert the HTML into the DOM. I watched a few tutorials on how to make these extensions, but most of them are outdated and it has changed since then.

 

I tried adding jQuery (in the head of my main HTML file), but I don't know how to manipulate the data that is on the targetted page and not on the chrome extension page itself.

(for instance, the background page - ex: linustechtips.com - and not the main extension page - ex: extension.html)

 

Could anyone link me to good, up to date tutorials on how to do that? It probably won't be a direct tutorial on how it's done, but anything that is recent and that shows the basic of chrome extensions will do.

 

Thanks all for your help!

 

@linusforsell (I saw your amazing extension for LTT forum, you seem to know your way around these ^^)

 

Hey Drown!

 

Sounds like a fun and useful little project, for sure.

 

It's actually really simple to use JavaScript on the page itself, you just need to specify when and where the scripts should load, here's an example of a block your manifest would need (right out of my extension):

 

[...]

 

"content_scripts":

[

     {

       "matches": ["*://*.linustechtips.com/*"],

       "js": ["jquery.min.js", "page.js"],

       "css" : ["lttEnhance.css"]

     }

]

 

[...]

 

See what's happening here?

 

When the plugin is enabled, and the user is on a linustechtips.com URL, it will inject the files jquery.min.js, page.js (which holds code to modify the page), and the CSS file lttEnhance.css.

 

The file page.js can interact with the webpage just as any natively included JavaScript can.

 

Good luck! 

[Drown]

@linusforsell

 

Thanks a lot! I'll add this code to my manifest (edited, of course ^^) and I'll give it a shot when I get back home!

I was considering copying the content (prebuilt text) to the clipboard at the press of a button, but that's only if I can't paste it directly in the page with js/jQuery.

[linusforsell]

@linusforsell

 

Thanks a lot! I'll add this code to my manifest (edited, of course ^^) and I'll give it a shot when I get back home!

I was considering copying the content (prebuilt text) to the clipboard at the press of a button, but that's only if I can't paste it directly in the page with js/jQuery.

 

Should be simple enough to manipulate.

$('input').val($('input').val() + "your string"); — This would add your string to the end of the input content

$('input').val("your string" + $('input').val()); — This would add your string to the start of the input content

You'll just have to work out a code piece to let the script know which input you actually want to manipulate, but I'm sure you can figure that part out yourself as it isn't very complicated.