标签: google-chrome-extension

我正在尝试开发一个 Google Chrome 扩展程序。

当用户单击扩展按钮时，将出现一个小窗口（不是window.open/弹出）并显示网页。我有基本的 JavaScript 知识，而且我听说 JavaScript 可以实现这一点。所以，我想在有限大小的窗口中显示我的网站。我怎样才能用 JS/HTML/CSS 简单地做到这一点？

一个例子（不是同一件事，但很接近）：在自定义窗口中显示的谷歌浏览器扩展

感谢您的任何意见。

在 Chrome 扩展中，我创建了选项卡属性，并尝试将其与每个选项卡一起存储。做这个的最好方式是什么？我研究过使用 localStorage，但似乎可能有一种更简单的方法。数据绝不是永久的，它仅在选项卡存在时就存在。

我正在尝试制作一个简单的 chrome 扩展，它会在右键单击时显示一些选项。有一个选项页面，用户可以在其中输入他的首选项（右键单击时显示哪些选项以及不显示哪些选项）。保存用户的首选项后，它们不会反映在扩展程序的行为中，直到重新加载或重新启动 Chrome 为止。我怎样才能避免这种情况？我希望这些更改立即生效。

有谁知道为什么如果您document.body.innerHTML += "content";在页面上使用JavaScript 会停止工作？我有以下代码：

document.addEventListener('contextmenu', function (e) {
    e.preventDefault();
    try {
        document.getElementById('menu').remove();
    } catch (x) {
        //
    }
    var newHtmlText = "<div id='menu'>";
    newHtmlText += "<div class='menu-item' id='menu-back' onclick='window.history.back();'>" +
        "<div class='fa fa-arrow-left icon'></div><div class='text'>Back</div><div class='clear'></div></div>";
    newHtmlText += "<div class='menu-item' id='menu-forward' onclick='window.history.forward();'>" +
        "<div class='fa fa-arrow-right icon'></div><div class='text'>Forward</div><div class='clear'></div></div>";
    newHtmlText += "<div class='menu-item' id='menu-reload' onclick='location.reload();'>" +
        "<div class='fa fa-repeat icon'></div><div class='text'>Reload</div><div class='clear'></div></div>";
    newHtmlText += "<hr />";
    newHtmlText += "<div class='menu-item' id='menu-home' onclick='location.href = \"/\";'>" +
        "<div class='fa fa-home …

在我的内容脚本中，我使用这种方法来访问网页的变量：

function exec(fn) {
    var script = document.createElement('script');
    script.setAttribute("type", "application/javascript");
    script.textContent = '(' + fn + ')();';
    document.body.appendChild(script); //run the script
    document.body.removeChild(script); //clean up
}

exec( function(){
    var test = websiteVar

    chrome.runtime.sendMessage("extensionID", {test: test}, function(response) {

    });
});

在它说 extensionID 的地方，如果我对其进行硬编码，它就可以工作。但是，我无法使用，chrome.runtime.id因为它是在页面中注入的。我想我读过它们在相同的上下文中不起作用。

有没有办法以编程方式获取扩展名？

这是我第一次创建 Google Chrome 扩展程序，当单击 YouTube 上的建议视频或任何与此相关的视频时，我找不到可靠地让内容脚本运行一次的方法。我试过将“all_frames”设置为true，但这会多次调用脚本。在浏览 YouTube 视频时，是否有一种简单的方法可以让每个视频只运行一次内容脚本？

PS：我使用 YouTube 作为我的主要示例，但其他网站上也存在此问题。是什么原因造成的，我该如何解决？

{//manifest.json
  "name": "Test",
  "version": "0.0.1",
  "content_scripts": [{
      "matches": ["<all_urls>"],
      "js": ["run.js"],
    }],
  "permissions": ["activeTab"],
  "manifest_version": 3
}

——

//run.js
console.log('running');

我开发了一个使用 Firebase 身份验证和实时数据库的网站。我只限制了对我的服务器的 Firebase API 密钥访问（HTTP 引用 - ' https://projectname.firebaseapp.com/ '）。但现在我也想允许我的 chrome 扩展程序访问它。

当我尝试从 中提取 aac 时webm，会出现持续时间不一致的情况。aac少了十分钟。不同的webm视频，差距是不一样的。

webm视频由chrome.tabCapture.capture生成chrome extension

代码：

chrome.tabCapture.capture({
  video: true,
  audio: true,
  videoConstraints: {
    mandatory: {
      minWidth: 1920,
      minHeight: 1080,
      maxWidth: 1920,
      maxHeight: 1080,
      maxFrameRate: 30,
      minFrameRate: 30,
    }
  }
})

上面的代码会返回一个流，我会使用JS的MediaRecorder方法来处理这个流，最后保存为webm文件。

代码：

new MediaRecorder(stream, {
  audioBitsPerSecond: 128000,
  videoBitsPerSecond: 2500000,
  mimeType: 'video/webm;codecs=vp9'
})

如果你不知道上面代码的意思，没关系，我来解释一下主要信息：

1. 宽度： 1920
2. 高度： 1080
3. 帧数： 30
4. 音频位： 128000
5. 视频位： 2500000
6. 哑剧类型： video/webm;codecs=vp9

我尝试了很多方法，如下所示：

chrome.tabCapture.capture({
  video: true,
  audio: true,
  videoConstraints: {
    mandatory: {
      minWidth: 1920, …

我们可以将 google app-script 代码发布到 chrome 扩展工具中吗？到目前为止，我们从 app-script 开发了一个 web 应用程序，它作为一个 web 应用程序工作。需要做什么才能将其从 google app-script Editor 转换为 chrome 扩展。对有价值的建议表示感谢。

我正在尝试编写一个在 content.js 中运行计时器的简单应用程序，但也会发送网页 url 的警报。查看文档后，我想出了这个：

内容.js

chrome.tabs.query({'active': true, 'windowId': chrome.windows.WINDOW_ID_CURRENT},
   function(tabs){
      alert(tabs[0].url);
   }
);

let message = "";

console.log("Death Timer Running...");

let body = document.getElementsByTagName("body")[0];

let div = document.createElement("DIV");

div.setAttribute("CLASS", "timer");

let text = document.createElement("P1");
text.setAttribute("ID", "myText");
text.setAttribute("CLASS", "timerText");

div.appendChild(text);


body.appendChild(div);


var endDate = new Date("Oct 07, 2085 16:37:52").getTime();

var myfunc = setInterval(function() {
// code goes here
  var now = new Date().getTime();

  var timeLeftSeconds = parseInt((endDate - now)/1000);
  var timeLeftMinutes = parseInt(timeLeftSeconds/60);
  var timeLeftHours = parseInt(timeLeftMinutes/60);
  var timeLeftDays = …