document.write in Chrome Extension

Question

I'm new to this so please bear with me. I am trying to write a chrome extension that does the following:

Detect www.website.com/anypage.html. If this website is detected, then do the following.
Don't load the URL.
Instead, write a blank document with a hyperlink to www.website.com/anypage.html?ie=UTF8

The script is set to run at document start (in the manifest).

Here is my code:

Detect URL:

var regExp = /website.com/gi;
var match = 0;
testString = window.location.href.toString();
if(regExp.test(testString) { 
match = 1;

Write blank document with link to the URL with the UTF8 encoding tag:

document.write("<a href=" + window.location.href + "?ie=UTF8>Title of Link</a>");

This doesn't work as expected, and just shows a blank page. Anyone have any ideas?

Thanks!

EDIT: Here is the full code:

checklink(); // If there is a match, then checklink will return a 1. If it's already     tagged, it will return a 5.
var matchLink = null;
if (checklink() === 1) {
matchLink = window.location.href.toString();

if (checklink() != 1) {
matchLink = null;

function checklink() { //checks to see if the current URL matches website.com
var regExp = /website.com/gi,
testString = window.location.href.toString(),
match = 0,
tagged = 0;

if (regExp.test(testString)) { //if there is a match, returns 1
match = 1;


var regExp2 = /UTF8/gi;
if (regExp2.test(testString)) { //if UTF8 is found, then it returns 5
tagged = 5;

return(match + tagged);


function tagUTF() {
if (matchLink) {
var newLink = matchLink + "?ie=UTF8";
document.write("<a href=\"" + newLink + "\">Link</a>");


if (matchLink) {
tagUTF();
}

As per @ldiqual, we need to see more code, but the first thing that jumps out at me is that you don't quote the URL in the anchor.... document.write("Title of Link"); — Reinstate Monica Cellio, Jan 14 '12 at 00:29
Added the full code in an edit. Also added quotes for the URL in the anchor. However, I don't think that's the problem because a simple `document.write(Test)` doesn't work either. — user1137778, Jan 14 '12 at 02:37

Adam Ayres · Accepted Answer · 2012-01-14T21:21:51.540

2

The chrome content script has access to the DOM, so you could just replace the contents of the body element of the current page with a new node that has your anchor tag either using dom manipulation methods or innerHTML:

document.body.innerHTML = "<a href=" + window.location.href + "?ie=UTF8>Title of Link</a>";

Please note, this assumes that the JavaScript that is doing the DOM manipulation was properly added for your Chrome extension as a "content script":

http://code.google.com/chrome/extensions/content_scripts.html

EDIT:

Here is the code I used to make it work for me locally:

manifest.json

{
  "name": "Test",
  "version": "1.0",
  "description": "Test",
  "permissions": [
    "<all_urls>"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content-script.js"],
      "run_at": "document_end"
    }
  ]
}

content-script.js

document.body.innerHTML = "<a href='test'>test</a>";

edited Jan 14 '12 at 21:21

answered Jan 14 '12 at 08:12

Adam Ayres

8,732
1
32
25

I tried that - it doesn't work, and it gives me a TypeError exception. The JS file that is doing the DOM manipulation was added to the extension as a content script, and set to run at document_start. I also experimented with document_end and document_idle, and still no dice. After further inspection, it appears that at the exception, document.body is null, which explains why it won't accept the innerHTML. Why is document.body null though? – user1137778 Jan 14 '12 at 19:48
I edited the answer with the code that I got it to work with locally. I did some testing around the internet and it worked on all the pages I tried (including stackoverflow!). I am not sure why doucment.body would be null for you, especially when you used the _run_at_ of _doucment\_end_ – Adam Ayres Jan 14 '12 at 21:23

document.write in Chrome Extension

1 Answers1

EDIT:

Linked