從擴展和更新iframe動態注入Iframe訪問當前選項卡的DOM DOM

我正在開發一個擴展，在每個頁面頂部添加一個自定義工具欄。爲此，我正在從擴展中注入toolbar.html。由於我是初學者，我不確定如何訪問當前選項卡的DOM元素以及如何使用當前選項卡的DOM中的數據更新新添加的iframe。從擴展和更新iframe動態注入Iframe訪問當前選項卡的DOM DOM

這裏是清單：

{ 
    "manifest_version": 2, 

    "name": "My Extension", 
    "description": "Extension to show custom toolbar", 
    "version": "1.0", 

    "browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    }, 
    "background":{ 
     "scripts":["background.js"] 
    }, 
    "content_scripts":[{ 
     "matches":["https://bitbucket.mycompany.com/*"], 
     "css":["styles.css"], 
     "js":["jquery.js","myscript.js"], 
     "all_frames":true 
    }], 
    "web_accessible_resources":[ 
     "toolbar.html", 
     "styles.css" 
    ] 
}

內容腳本是myscript.js

var url=chrome.extension.getURL('toolbar.html'); 
var height='35px'; 
var iframe="<iframe src='"+url+"' id='myCustomBar' style='height:"+height+"'></iframe>" 

$('html').append(iframe); 

$('body').css({ 
    'transform':'translateY('+height+')' 
});

我的問題是：

如果我使用一個單獨的內容的腳本（已回答這裏： access iframe content from a chrome's extension content script）爲我框架，網址應該匹配什麼？
是否有任何其他方式從動態注入的iframe中訪問當前選項卡的DOM？
假設我需要此擴展程序在所有具有類似https://bitbucket.*.com的URL模式的URL上運行，應該匹配什麼？

來源

2016-12-15 uhs

不能使用單獨的內容腳本，該iframe，由於在iframe中的src開始與chrome-extensions://這是不允許在默認情況下內容的腳本注入。
您可以包括腳本標籤爲toolbar.html，然後用Window.postMessage做消息toolbar.js和父內容腳本之間傳遞。
根據Match patterns，如果'*'在主機中，則它必須是第一個字符。所以你可能想要使用像https://*.com之類的東西，並檢查代碼中的其他部分。

來源

2016-12-15 09:14:09

從擴展和更新iframe動態注入Iframe訪問當前選項卡的DOM DOM

回答

相關問題