What's a simple way in Google Chrome to insert Javascript into sites?

Question

I would like to be able to add custom snippets of javascript to any site that matches a regex. This is mostly because of sites that I use daily because of specialized content, but which have a poor design. I want to be able to do something like:

Visit site See that sidebar overwrites content
Whip out developer tools, find div id for sidebar
Edit a snippet of javascript which is executed on document.ready for this domain:
```
$('#sidebar-right').remove();
```

A bit of searching for user scripts tells me that I need to be writing a Chrome extension, which seems unfortunate and overkill. Is there not an easier way, or an extension which is nothing but a javascript editor that assigns snippets to domains? I'd really like to be able to edit in Chrome itself, or at least have a file that I can just leave open in MacVim all the time. An extension requires unloading/installing to update as far as I can tell.

If I just had one big javascript file, that would be fine. I'd just wrap my customizations in domain checks.

Bonus love if I can write in CoffeeScript.

I wonder... would this be possible to do without an extension? — cregox, Mar 12 '17 at 07:32
@bhuga, can you change the accepted answer please? dotjs is no longer maintained, and your answer about tampermonkey should be the accepted one — CalvT, Mar 16 '17 at 20:42
Is this possible to do without an extension? as extensions has rights to read all data and websites we visit. — Jaspreet Jolly, Aug 02 '19 at 09:48

score 18 · Accepted Answer · edited Aug 22 '22 at 19:53

18

The answer is to use the Tampermonkey chrome extension.

https://chrome.google.com/webstore/detail/dhdgffkkebhmkfjojejmpbldmpobfkfo

edited Aug 22 '22 at 19:53

wesleysmyth

4,348
2
17
17

answered Sep 22 '11 at 16:09

bhuga

1,292
1
14
24

score 13 · Answer 2 · answered Sep 22 '11 at 21:28

13

Why not dotjs http://defunkt.io/dotjs/ ? It's local, you can version it with git, you can easily take it to another computer...

answered Sep 22 '11 at 21:28

topek

18,609
3
35
43

2

Sadly this is only OSX though. – AlexC Oct 30 '15 at 10:53
2

Sadly this extension is no longer maintained. – lumio Apr 27 '16 at 14:37
3

Dotjs now mentions [Witchcraft](https://github.com/luciopaiva/witchcraft) as its successor. – Orestis Kapar Dec 24 '19 at 14:48

score 6 · Answer 3 · answered Apr 25 '16 at 16:48

Another alternative that neatly solves the problem is Custom JavaScript for websites. You just need to install the extension, which takes around 2 seconds, and then you can immediately start typing your custom JavaScript for the specified website.

The extension automatically recognizes the current website, so all you need to do is write your code and click on Save. You can also easily import jQuery or your external scripts for convenience.

curious what's the advantage of this vs tampermonkey. – tinker Apr 28 '21 at 11:02 — tinker, Apr 28 '21 at 11:02

score 4 · Answer 4 · answered Oct 11 '17 at 03:21

4

Custom JavaScript for Websites 2 is an alternative to Custom JavaScript for Websites, with some bug fixes and sync scripts across devices feature.

answered Oct 11 '17 at 03:21

xcv58

63
1
5

Orestis Kapar · Answer 5 · 2019-12-24T14:57:57.830

4

Witchcraft is another Google Chrome extension for loading custom Javascript and CSS, and it is supposedly for more avanced users. The older dotjs project repository lists Witchcraft as its successor.

edited Dec 24 '19 at 14:57

answered Dec 24 '19 at 14:52

Orestis Kapar

129
1
9

score 3 · Answer 6 · answered Apr 29 '19 at 14:33

3

Snippets are available directly in Chrome Devtools

https://developers.google.com/web/tools/chrome-devtools/javascript/snippets

answered Apr 29 '19 at 14:33

Jordan

3,813
4
24
33

score 1 · Answer 7 · answered Aug 24 '11 at 07:01

1

What you're looking for is Greasemonkey. But wait, Greasemonkey is for Firefox only, right? Turns out, you can install Greasemonkey user-scripts as native Chrome add-ons. Just go to userscripts.org and hit the Install button on one of them, and Chrome will automatically convert it into a native add-on. Then, write your own and install it using Chrome.

Note: This only works in Chrome 4.0.

answered Aug 24 '11 at 07:01

Chetan

46,743
31
106
145

Firefox is great for having Greasemonkey, but it's so cool that Chrome supports those user-scripts natively. Much easier to manage them as add-ons than in a separate Greasemonkey interface. – Chetan Aug 24 '11 at 07:10
This isn't quite what I want, unfortunately. There's no easy way to edit those in a hurry, or create a new one from scratch. I'm not really interested in community user scripts--this is about personal customization. – bhuga Aug 24 '11 at 15:50
1

You can make them really quickly (see [this one](http://userscripts.org/scripts/review/12897)), and make a simple HTML file that hosts them, and open them locally. What's so hard about it? – Chetan Aug 25 '11 at 18:48

What's a simple way in Google Chrome to insert Javascript into sites?

7 Answers7