0

I setup this layout for an extension I am trying to build to make my work easier.

manifest.json

      {
  "manifest_version": 2,
  "name": "Work Order Dispatcher",
  "version": "0.1",
  "description": "Work order dispatcher for BeHome/v12",

  "background": {
    "persistent": false,
    "scripts": ["background.js"]
  },
  "content_scripts": [{
    "matches": ["*://*.v12.instantsoftware.com/*"],
    //"matches": ["www"],
    "js": ["content.js"]
  }],
  "browser_action": {
    "default_title": "Work Order Dispatcher"
  },

  "permissions": [
    "activeTab"
    ]
}

Background.js

// Regex-pattern to check URLs against. 
// It matches URLs like
//var urlRegex = /^https?:\/\/(?:[^./?#]+\.)?v12.instantsoftware\.com/;
var urlRegex = /^https?:\/\/(?:[^./?#]+\.)?v12\.instantsoftware\.com/;

// A function to use as callback
function doStuffWithDom(domContent) {
    console.log('I received the following DOM content:\n' + domContent);
}

// When the browser-action button is clicked...
chrome.browserAction.onClicked.addListener(function (tab) {
    // ...check the URL of the active tab against our pattern and...
    if (urlRegex.test(tab.url)) {
        // ...if it matches, send a message specifying a callback too
        chrome.tabs.sendMessage(tab.id, {text: 'report_back'}, doStuffWithDom);
    }
});

content.js

// Listen for messages
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
    // If the received message has the expected format...
    if (msg.text === 'report_back') {
        // Call the specified callback, passing
        // the web-page's DOM content as argument
        sendResponse(document.getElementsByTagName('body'));
    }
});

I am trying to pull data from a text field on a website and insert it in another text field on a different website. I use the two sites side by side. In my console I get:

4background.js:8 I received the following DOM content:
undefined

I think it is only pulling the background DOM of the extension itself?

I guess the confusion comes in at would I be able to store the content of a dom item and place it into an HTML text area of my own (which I have yet to build) and then be able to send that off to my other website so I can dispatch my guys. Let me know if you need more details about what I am trying to accomplish.

Thanks in advance.

Community
  • 1
  • 1
Shane Walker
  • 301
  • 3
  • 7
  • I dont think you can send dom object that way. try to send innerHTML instead – YOU Nov 01 '16 at 01:57
  • Do you have a quick example? I'm not sure what you mean. – Shane Walker Nov 01 '16 at 04:09
  • try `document.body.innerHTML` instead of `document.getElementsByTagName('body')` – YOU Nov 01 '16 at 04:18
  • 1
    As per documentation, only JSON-ifiable objects may be messaged. This excludes DOM elements. – wOxxOm Nov 01 '16 at 04:36
  • 2
    Given that you are initiating everything from a `browser_action` button (i.e. initiated from the Chrome UI, not the webpage), as a suggestion, rather than using `content_script` to always inject your script, seriously consider using `chrome.tabs.executeScript()` to only inject the script when it is needed (button clicked). Doing so can save resources (no script loaded when not used) and significantly reduce the complexity of your content script (no need for message sending for something so simple). [Working example of returning DOM text](http://stackoverflow.com/a/39319198/3773011) – Makyen Nov 01 '16 at 05:07

0 Answers0