CODEWITHSUNDEEP
javascriptgoogle-chrome-extensiongoogle-chrome-appselenium-idebrowser-extension
Oskar Woźniak
Oskar Woźniak

Reputation: 715

Chrome extension how to open new window and send infromation from active tab

I'm trying to do something similar to Selenium IDE (Browser extension). I would like to:

1 Open new window

2 Record actions from active tab and send it to my new window

But I'm doing something wrong because I'm receiving error

Unchecked runtime.lastError while running tabs.executeScript: Cannot access contents of url "chrome-extension://djnljameancbknhjdldffnejafgfkamf/dialog.html". Extension manifest must request permission to access this host.
    at chrome-extension://djnljameancbknhjdldffnejafgfkamf/background.js:35:21

manifest.json

{
  "name": "Dialog tester",
  "version": "1.0",
  "manifest_version": 2,
  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "open-dialog.js"
      ]
    }
  ],
  "permissions": [
    "tabs",
    "<all_urls>"
  ],
  "web_accessible_resources": [
    "dialog.html",
    "style.css"
  ]
}

background.js

// Handle requests for passwords

var createdWindow;

chrome.runtime.onMessage.addListener(function(request) {
    if (request.type === 'request_password') {
        chrome.tabs.create({
            url: chrome.extension.getURL('dialog.html'),
            active: false
        }, function(tab) {
            // After the tab has been created, open a window to inject the tab
            chrome.windows.create({
                tabId: tab.id,
                type: 'popup',
                focused: true
                // incognito, top, left, ...
            }, function (window) {
                console.log(window);
                // Trace tab id which is created with this query
                createdWindow = window.tabs[0].id
            });
        });
        document.writeln("fsfs");
    }
});
function setPassword(password) {
    // Do something, eg..:
    console.log(password);
};

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
    // Inject script into chosen tab after it is loaded completely
    if (tabId == createdWindow && changeInfo.status == "complete") {
        // Inject Jquery and in current tab
        chrome.tabs.executeScript(tabId, {
            "file": "jquery.js"
        }, function () {
            // I am in call back
            console.log("Injected some jquery ");
        });
    }
});

dialog.html

<!DOCTYPE html><html><head><title>Dialog test</title></head><body>
<form>
    <input id="pass" type="password">
    <input type="submit" value="OK">
</form>
<script src="dialog.js"></script>
</body></html>

dialog.js

document.forms[0].onsubmit = function(e) {
    e.preventDefault(); // Prevent submission
    var password = document.getElementById('pass').value;
    chrome.runtime.getBackgroundPage(function(bgWindow) {
        bgWindow.setPassword(password);
        window.close();     // Close dialog
    });
};

open-dialog.js

if (confirm('Open dialog for testing?'))
    chrome.runtime.sendMessage({type:'request_password'});

Any ideas what is wrong?

Upvotes: 0

Views: 4695

Answers (1)

woxxom
woxxom

Reputation: 73526

You can't inject content script into extension pages which have chrome-extension:// scheme. Simply reference the scripts in your internal page (dialog.html):

<script src="jquery.js"></script>

Also, to create a window with popup type there's no need to do all that you do. Create it directly:

chrome.runtime.onMessage.addListener(function(request) {
    if (request.type === 'request_password') {
        chrome.windows.create({
            url: '/dialog.html',
            type: 'popup', width: 400, height: 400,
        });
    }
});

Upvotes: 1

Related Questions