3

我正在尝试开发一个 Chrome 扩展程序，以使用IE Tab扩展程序在新选项卡中打开存储在 Confluence 中的 Office 文档。

在“查看页面附件”屏幕中，有一个用于 Office 文件附件的“在 Office 中编辑”链接。该链接有一个单击事件，该事件创建一个新实例 a URLLauncher，用于打开文档。Chrome 不支持此功能，因此我想将自己的URLLauncher原型添加到网页中以使其工作。

简而言之，这是我的想法：

  1. 使用将原型注入“查看页面附件”页面的内容脚本创建一个 Chrome 扩展程序URLLauncher（我不知道这是否是正确的方法，所以我愿意接受建议）。
  2. 当用户单击“在 Office 中编辑”链接时，该URLLauncher.open方法通过调用 IE 选项卡扩展名在新选项卡中打开文件附件。

我可以看到“你好！” 每次我加载网页时都会发出警报，这确认 content.js 正在被注入。然而，URLLauncher在网页中不可用。我认为这是因为window内容脚本的全局对象与页面/扩展的全局命名空间不同（即window.URLLauncher未定义）。我怎样才能重新组织我的代码来克服这个障碍？

这些是我的文件：

清单.json

{
   "manifest_version": 2,
   "background": {
      "scripts": [
         "background.js"
      ]
   },
   "content_scripts": [ {
      "js": [ "content.js" ],
      "matches": [ "<all_urls>" ]
   } ],
   "description": "This is a test extension",
   "permissions": [
      "tabs", "http://*/*", "https://*/*"
   ],
   "name": "Test extension",
   "version": "1.0.0"
}

背景.js

chrome.tabs.executeScript(null, { 
   code: "document.body.appendChild(document.createElement('script')).src='" + 
   chrome.extension.getURL("content.js") + "';" 
}, null);

chrome.runtime.onMessage.addListener(
   function(request, sender, sendResponse) {
      console.log(sender.tab ?
            "from a content script:" + sender.tab.url :
            "from the extension");
      if (request.id == "doUrlLaunch") {        
         chrome.tabs.create({ url: request.nUrl, selected: true });
         sendResponse({result: "goodbye"});
      }
   }
);

内容.js

var prefixUrl = 'chrome-extension://hehijbfgiekmjfkfjpbkbammjbdenadd/iecontainer.html#url=';
alert('Hi there!');
function URLLauncher() {

}

URLLauncher.prototype = {  
   open : function(urlStr) {
      var newUrl = prefixUrl + 'https://host.com' + encodeURI(urlStr);
      chrome.runtime.sendMessage({id: "doUrlLaunch", nUrl: newUrl}, function(response) {
      });
   }
}

提前致谢。

更新 1

我按照Rob W和此页面（“消息传递”）给出的说明编辑了文件；现在代码被注入到页面本身中，但仍然存在一个主要问题。实际JS代码向内容脚本发送消息，但是消息没有被监听器捕获，所以没有创建新标签，回调函数也没有收到响应；我收到的错误消息：（未知）的事件处理程序错误：TypeError：无法读取未定义的属性“成功”。

这些是更新的文件：

清单.json

{
   "manifest_version": 2,
   "content_scripts": [ {
      "js": [ "content.js" ],
      "matches": [ "<all_urls>" ]
   } ],
   "web_accessible_resources": [ "script.js" ],
   "description": "This is a test extension",
   "permissions": [
      "tabs", "http://*/*", "https://*/*"
   ],
   "name": "Test extension",
   "version": "1.0.0",
   "externally_connectable": {
      "ids": ["*"],
      "matches": ["*://*.hostname.com/*"]
   }
}

内容.js

var s = document.createElement('script');
s.src = chrome.extension.getURL("script.js");
s.onload = function() {
    this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);

chrome.runtime.onMessage.addListener(
//Unreachable code!
   function(request, sender, sendResponse) {
      console.log(sender.tab ?
            "from a content script:" + sender.tab.url :
            "from the extension");
      if (request.id == "doUrlLaunch") {        
         chrome.tabs.create({ url: request.nUrl, selected: true });
         sendResponse({result: "goodbye"});
      }
   }
);

脚本.js

var prefixUrl = 'chrome-extension://hehijbfgiekmjfkfjpbkbammjbdenadd/iecontainer.html#url=';
function URLLauncher() {

}

URLLauncher.prototype = {  
   open : function(urlStr) {
      var newUrl = prefixUrl + 'https://hostname.com' + encodeURI(urlStr);
      chrome.runtime.sendMessage({id: "doUrlLaunch", nUrl: newUrl}, function(response) {
          if (!response.success)
              console.log('Something went wrong...');
      });
   }
}
4

1 回答 1

0

不确定您是否仍然对答案感兴趣，但在您编辑的文件中，您的问题出在听众所在的位置。

  1. chrome.runtime.sendMessage没有到达内容脚本；它适用于扩展页面。传递给内容脚本的消息通过 工作chrome.tabs.sendMessage，但这与此任务无关。

  2. 内容脚本无法调用chrome.tabs，因为它们没有所需的 API 访问权限。

一种解决方案是调用一个后台脚本，该脚本可以接收这些消息并调用所需的 API。

因此，您需要第三个脚本，从以下代码中取出此代码content.js：

// background.js
chrome.runtime.onMessage.addListener(
   function(request, sender, sendResponse) {
      console.log(sender.tab ?
            "from a content script:" + sender.tab.url :
            "from the extension");
      if (request.id == "doUrlLaunch") {        
         chrome.tabs.create({ url: request.nUrl, selected: true });
         sendResponse({result: "goodbye"});
      }
   }
);

并修改您的清单：

  "background": { "scripts": [ "background.js" ] },
于 2014-05-09T09:20:49.440 回答