Chrome擴展內容腳本中的聚合物元素

我創建了一個自定義Polymer元素，並試圖在我的Chrome擴展中使用它。但是，我遇到了以下問題。Chrome擴展內容腳本中的聚合物元素

我無法從內容腳本訪問元素的API。這是我的意思。

我的元素的模板

<link rel="import" href="../polymer/polymer.html"> 
<dom-module id="my-element"> 
<template> 
... some html... 
</template> 
<script src="js/my-element.js"></script> 
</dom-module>

我-element.js

Polymer({ 
    is: 'my-element', 
    init: function() { 
    console.log('init'); 
    } 
});

在content.js

var link = document.createElement('link'); 
link.setAttribute('rel', 'import'); 
link.setAttribute('href', chrome.extension.getURL('my-element.html')); 
link.onload = function() { 
    var elem = document.createElement('my-element'); 
    document.body.appendChild(elem); 
    elem.init(); // Error: undefined is not a function 
}; 
document.body.appendChild(link);

有趣的是，我可以看到my-element是所有這些都是陰影和事情。如果我在主機網頁的控制檯中運行document.querySelector('my-element').init()，它將無誤地執行。但是，在內容腳本中執行相同的代碼會產生錯誤。

我試過將聚合物本身作爲內容腳本。我碰到registerElement的問題，但我解決了它，這要歸功於this的問題。在這種情況下，我在我的content.js中定義了window.Polymer。我的元素的API變得完全可訪問，但現在當我將它附加到主機網頁的DOM時，它不會被渲染。

來源

2015-07-21 optimistiks

我不認爲瀏覽器由於沙箱而在正常的http/https頁面上遵循'chrome-extension：//'鏈接，至少這樣的鏈接在這裏不起作用。您是否在清單中通過[web_accessible_resources]（https://developer.chrome.com/extensions/manifest/web_accessible_resources）公開了'my-element.html'？ – wOxxOm

是的，我在我的清單中暴露了'my-element.html'和所有相關的css文件。該元素實際上被渲染，它的方法和用'Polymer（{...}）聲明的屬性可以通過'document.querySelector（）'訪問，但只能從主機網頁訪問，而不能從內容腳本訪問。我想我應該不知何故在內容腳本中聲明'my-element'，但我不知道如何。 – optimistiks

你打你的內容腳本的沙箱：

內容腳本在一個特殊的環境中執行所謂的孤立世界。他們可以訪問他們注入到的頁面的DOM，但是不是由該頁面創建的任何JavaScript變量或函數。 它看起來像每個內容腳本一樣，沒有其他JavaScript 正在其上運行的頁面上執行。反過來也是如此：頁面上運行的JavaScript不能調用任何函數，也不能訪問由內容腳本定義的任何變量。

從https://developer.chrome.com/extensions/content_scripts#execution-environment

的聚合物組分的腳本運行在主機頁面，所以它是不可見的內容腳本。

您可以在主機頁面中注入一個新的腳本標記，並從擴展中的.js文件中獲取源代碼。

var script = document.createElement('<script>'); 
script.src = chrome.extension.getURL('something.js'); 
document.appendChild(script);

這將在主機頁面的上下文中運行something.js，授予其訪問的主機頁面的所有其他腳本（包括您的聚合物成分），但也使得它無形到您的內容腳本。請特別注意在主頁面注入腳本的security implications。

如果您不能/不願意將所有擴展邏輯推送到該注入的腳本中，例如因爲您需要訪問chrome.* API或主機頁面和內容腳本之間的某種其他類型的通信，請查看message posting。

來源

2015-07-26 17:47:22

我在想那個。我終於決定轉移到x-tag庫。它具有更簡潔明瞭的聲明元素的方式，並且可以輕鬆地將庫插入到內容腳本的作用域中，因爲它作爲.js文件提供。 – optimistiks

通過這種方式，我無需將內容腳本中的所有邏輯移動到注入的主機腳本，也無需考慮可能存在的庫衝突（例如，如果Polymer已包含在主機頁面中，該怎麼辦）。 – optimistiks

Chrome擴展內容腳本中的聚合物元素

回答

相關問題