Menu
I am trying to append a div to page of current active tab. However I am getting this error:
Error during tabs.executeScript: Cannot access contents of url .... Extension manifest must request permission to access this host. My Code: (show_loader.js)
var dv = document.createElement('div'); dv.id = 'myid'; dv.innerHTML = 'test'; document.body.appendChild(dv); However when I put this code:
document.body.style.backgroundColor = 'green'; It works as expected and background color of current tab is changed with no other change except for the code in show_loader.js file which is run from popup.js like this:
chrome.tabs.executeScript(null, {file: "show_loader.js"}); My Manifest file also does have:
"permissions": [ "tabs", "notifications", "http://*/", "https://*/" ], So I wonder why it gives above error when I try to do anything else other than setting background color. Even simple alert or console.log alone on that page gives same above mentioned error.
How to fix that ?
Manifest:
{ ... name and description ... "icons": { "16" : "img/icon.png", "48" : "img/48.png", "128" : "img/128.png" }, "permissions": [ "tabs", "notifications", "http://*/*", "https://*/*" ], "browser_action": { "default_icon": "img/icon.png", "default_title": "Page title", "default_popup": "popup.html" } } popup.js
// send data to server for saving $('#btn').click(function(){ chrome.tabs.executeScript(null, {file: "show_loader.js"}); $loader.show(); var data = $(this).closest('form').serialize(); $.ajax({.....}); }); window.onload = function(){ var $loader = $('#loader'); $loader.show(); chrome.tabs.getSelected(null, function(tab) { //console.log(tab); $('#url').val(tab.url); $('#title').val(tab.title); $loader.hide(); }); }; popup.html
<html> <head> <link rel="stylesheet" href="css/style.css" type="text/css" /> </head> <body> <form action="" method="post" name="frm" id="frm"> <table border="0" cellpadding="3" cellspecing="0" width="370"> ...... </table> </form> <script src='js/jquery.js'></script> <script src='popup.js?v=014423432423'></script> </body> </html> show_loader.js
console.log($); // doesn't work // document.body.style.backgroundColor = 'green'; // WORKS 
423
The manifest file is the blueprint of your extension. The manifest file includes information such as: The version number of the extension.
You can just use chrome. runtime. getManifest() to access the manifest data - you don't need to GET it and parse it.
If an API requires you to declare a permission in the manifest, then its documentation tells you how to do so. For example, the Storage page shows you how to declare the "storage" permission. Here's an example of the permissions part of a manifest file: "permissions": [
Code which worked
{ "name": "Manifest Permissions", "description": "http://stackoverflow.com/questions/14361061/extension-manifest-must-request-permission-to-access-this-host", "version": "1", "manifest_version": 2, "browser_action": { "default_popup": "popup.html" }, "permissions": [ "tabs", "notifications", "http://*/", "https://*/" ] } <html> <head> <script src="back.js"></script> </head> <body> <button id="tmp-clipboard">Click Me</button> </body> </html> document.addEventListener("DOMContentLoaded", function () { document.getElementById('tmp-clipboard').onclick = function () { chrome.tabs.executeScript(null, { file: "script.js" }); } }); var dv = document.createElement('div'); dv.id = 'myid'; dv.innerHTML = 'test'; document.body.appendChild(dv); Try Eliminating deprecated chrome.tabs.getSelected from your code and use chrome.tabs.query instead.
chrome.tabs.query({ "currentWindow": true, "status": true, "active": true //Add any parameters you want }, function (tabs) {//It returns an array for (tab in tabs) { //Do your stuff here } }); If you intention is to capture active browsing tab in current window where he clicked browser action use this code
chrome.tabs.query({ "currentWindow": true,//Filters tabs in current window "status": "complete", //The Page is completely loaded "active": true // The tab or web page is browsed at this state, "windowType": "normal" // Filters normal web pages, eliminates g-talk notifications etc }, function (tabs) {//It returns an array for (tab in tabs) { $('#url').val(tabs[tab].url); $('#title').val(tabs[tab].title); $loader.hide(); } }); The manifest v3 uses a different permission schema. This is what worked for me:
"host_permissions": [ "https://music.youtube.com/*" ], If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
