User:V111P/js/WebRef

A text box with the Cite Web template is displayed on top of the page after activating the bookmarklet.

WebRef is a script automating the filling of the {{cite web}} template. You use the script on the page you want to cite. A form will be displayed on top of that page with a text box containing the prefilled cite template. You should review the prefilled values and fill the missing ones and then press the "Compact & Copy" button (except for WP:LDR cites).

Not all the information can be autofilled on all sites, however it's easy to just drag or copy and paste the information from the page when the form with the cite template is on the same page.

For some sites, in order for the script to be able to fill all the information (including the name of the author and the date of the article), you have to configure the script to let it know where to find that information. To do that, press the Site setup button and follow the instructions.

The script can be used as a bookmarklet with the following address:

javascript:(function(){var d=document,s=d.createElement('script');s.src='//en.wikipedia.org/w/index.php?title=User:V111P/js/webRef.js&action=raw&ctype=text/javascript&smaxage=43200&maxage=86400';d.body.appendChild(s);})();

To test the script, using a desktop/laptop computer, you can just execute its source code (or the code above, after removing the javascript: part) in your browser's JavaScript console (which in most browsers can be opened by pressing the F12 key). Make sure you are on a page with (only one) article on it, for example on a news site.

You can edit this page. If I don't like or understand something you wrote, I will correct it. ;)

How to create the bookmarklet

It depends on your browser.

In Firefox click on any bookmark in the bookmark menu. (It will be more convenient if you turn on the Bookmarks toolbar from View/Toolbars/Bookmarks toolbar and create the bookmarklet there.) Select New Bookmark, enter a name (for example WebRef) in the Name field, enter the script given above in the address field (Location).
In Internet Explorer you can create a bookmark of any page in the usual manner (Add to favorites), then right-click it in the favorites menu, choose Properties, enter the JavaScript given above in the URL field, change the name (in the General section) to WebRef.
In Google Chrome and Opera (Windows and Linux) - press Ctrl+D and then the button Edit (for Chrome) or Properties (for Opera), and change the name to WebRef and address to the script above.
In Google Chrome (Mac) – press Cmd-D then the button More, and change the name to WebRef and address to the script above.

There is a second set of instructions further below if you have problems with these.

Quotation

If you select text on the page prior to activating the WebRef bookmarklet, the selected text will be used for the quote parameter in the Cite Web template. In Firefox you can select multiple text ranges (by holding the Ctrl key); they will be joined by [...] by the script.

Saving the settings for sites

For the script to be able to fill all the information (including the name of the author and the date of the article) on most sites you need to press the Site setup button and follow the instructions in order to help the script determine where to find this information. (Please, let me know if you don't understand the instructions.)

After you configure the script for the site you are using it on, you have the option to save the settings in the local storage (this doesn't work with old browsers as they don't have local storage). Unfortunately that is not the best place to store the settings because they can be deleted from there by a script from the site or when you delete your browsing history/cookies/etc. from the browser's settings. Also, you won't be able to use them with another browser and from other computers.

A better way is to save them to a subpage of your Wikipedia user page (use a page name with .js at the end for security reasons), make that page call WebRef, and then use your page's URL in your bookmarklet code. Here is an example of how your page should look like: webRefSiteDataExample.js.

It would be best if all wikipedians were able to share their site settings, but that's not likely to be possible any time soon. A special wiki or other kind of site can be created for that purpose, but it has to be able to handle vandalism too.

Extra words or characters in the values

If extra words or characters appear in the values of the parameters when using the script on some site, you can remove them every time by hand. Or you can make the script remove them automatically by changing the code for the site by hand (the code given on the page Site Setup). Here is an example: On BBC articles the author is given on a line below the title and the name is preceded by the word By. To remove this By, modify the value for the author parameter in the code for the BBC site, which is normally span.byline-name by adding ^^By at the end: span.byline-name^^By (actually just y instead of By will work too - everything before the first occurrence of the word after the first ^^ is automatically removed). If there are characters you want to remove from the end too (here as an example - an exclamation point), add another ^^ and the characters: span.byline-name^^By^^!. If you want to remove characters only from the end, use ^^^^ (i.e. leave empty the slot for the characters to omit from the beginning). No need to include spaces at the start or end of the words after ^^.

The caveat is that these words, after ^^, can be regular expressions. What that means is to use the characters \ . ? * + | ^ $ ( ) [ ] { } you need to prepend them with \. Otherwise they have special meanings. A period for examples means "any one character". An example: we want to remove everything after the first period: span.byline-name^^^^\. - here we use \ to escape the special-character meaning of the period.

How to create the bookmarklet -- super easy instructions!

The bookmark (bookmarklet) doesn't take you to a different page, all it does is run the JavaScript saved in it: a text box with the Cite Web template pops up at the top of the page you are currently on, after clicking on the bookmark.

This is actually super easy to set up. I do computer support for friends and family, so let's first ditch all the jargon: for all intents and purposes a bookmarklet is nothing more than a bookmark with special instructions -- in this case a JavaScript put in the place where you usually have the URL.

This is what you need to do:

In your second favorite browser, the one you don't use a lot for editing Wikipedia, go to https://en.wikipedia.org/wiki/User:V111P/js/WebRef
In your favorite browser open any web page that you haven't bookmarked yet. Make a bookmark -- I put mine on the Bookmarks bar for easy access.
Right-click the new bookmark and in FireFox go to Properties, in Chrome or Opera to Edit. You'll see that the first line is headed Name and contains the name of the webpage you just bookmarked. Replace the name of the webpage with whatever makes sense to you, I called my bookmark Wiki WebRef.
The second line is called Location or URL, depending on your browser. Delete the URL that is in it so that you have a blank line. Go to your other browser and copy the entire text in the green box. Then go back to your main browser and paste this into the Location or URL line of the bookmark. It will look like it won't fit, but it does.
Hit Save and you are done!

To use WebRef, click on the WebRef bookmark when you are on the page you want to cite. The special WebRef bookmark doesn't take you to another page, it runs the JavaScript in the bookmark and opens a text box with the Cite Web template.

If WebRef doesn't include the author's name, click on the 'Authors' button and enter the name(s) just as they appear on the webpage. "Jane Doe" will be converted automatically to "last = Doe | first = Jane."

Make sure to check the dates because WebRef doesn't always pick up the correct publication date, even when it is shown on the webpage.

Thank you V111P for giving us such an easy to use way for creating references! If you still have problems setting this up -- and after reading the troubleshooting tips below, I'd be happy to help. If you installed WebRef after reading my guide, I'd love to hear from you.

-- Peter NYC (talk) 01:50, 25 May 2019 (UTC)

Troubleshooting

The bookmark (bookmarklet) doesn't take you to a different page, all it does is run the JavaScript saved in it: a text box with the Cite Web template pops up at the top of the page you are currently on, after clicking on the bookmark.

If you have problems getting WebRef to work, first go to a site that is known to be easy to use with WebRef, the New York Times https://www.nytimes.com. Click on a news article on the main page, and then click on your WebRef bookmark.

If the textbox does not pop up:

Make sure that you are not blocking JavaScript in your browser settings.
If you use JavaScript blocking browser extensions such as NoScript or ScriptSafe turn them off temporarily and reload the page.
Ad blockers such as Adblock, Adblock Plus or uBlock Origin could be blocking JavaScript, so you may have to turn them off temporarily and reload the page.
Pause the Ghostery browser extension if you use it, because it is known to interfere, and then reload the page.

Sometimes you need to reload the webpage twice after turning off extensions. Good luck!