Question

I am trying to modify table’s insertRow function from Chrome extension.

oldInsRowFunc = document.getElementById(id).insertRow;
document.getElementById(id).insertRow = fakeInsertRow;
// .......
function fakeInsertRow (ind) {
    alert("fakeInsertRow called");
}

But when it’s called , instead of fakeInsertRow the native function is being invoked.
In other case, if I lunch the same code in javascript console – everything works fine.

Answer 1

The reason this does not work is because the JavaScript that is added by a Chrome extension (typically in a content-script) is executed in its own sandbox that does not have access to the JavaScript environment that the page is loaded in.

Here are the limitations of JavaScript that come from a Chrome Extension:

Here are some examples of what content scripts can do:
   * Find unlinked URLs in web pages and convert them into hyperlinks
   * Increase the font size to make text more legible
   * Find and process microformat data in the DOM

However, content scripts have some limitations. They cannot:
   * Use chrome.* APIs (except for parts of chrome.extension)
   * Use variables or functions defined by their extension's pages
   * Use variables or functions defined by web pages or by other content scripts

If your goal is to truly wrap/override a native JavaScript/DOM access method (yikes, seems bad), then one way to execute JavaScript in the context of the page is to create an externally hosted JavaScript file, and then use the Chrome Extension to add a script element to the page’s DOM that refers to the externally hosted file. The JavaScript that is inserted in this manner will run in the pages JavaScript environment (this means it will not be available to the Chrome Extension).

The Chrome Extension JavaScript would be something like:

document.body.appendChild(document.createElement("script")).src = "http://externally/hosted/javascript.js";

Then the JavaScript code in the file located at http://externally/hosted/javascript.js could be the code you have above.