google-chrome-extension - 使用 Chrome 内容脚本以编程方式将代码插入 Confluence 页面

Question

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

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

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

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

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

这些是我的文件:

list .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"
}

background.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"});
      }
   }
);

content.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 给出的说明编辑了文件还有这个page ('消息传递');现在代码已注入(inject)页面本身，但仍然存在一个主要问题。实际的 JS 代码向内容脚本发送消息，但消息没有被监听器捕获，因此没有创建新选项卡，回调函数也没有收到响应；我收到的错误消息:事件处理程序中的错误(未知):TypeError:无法读取未定义的属性“成功”。

这些是更新后的文件:

list .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/*"]
   }
}

content.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"});
      }
   }
);

script.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...');
      });
   }
}

Answer 1

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

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"});
      }
   }
);    

并修改您的 list :

  "background": { "scripts": [ "background.js" ] },