我创建了一个按钮来获取卡片的 url 并将相对路径添加到我们自己的 url 以阻止它在发布到 Flock 时显示描述。
现在它在一个弹出窗口中显示拼接的 url,我们必须手动复制它,我们想要的功能是单击按钮并让它复制文本。
var GRAY_ICON = 'https://cdn.hyperdev.com/us-east-1%3A3d31b21c-01a0-4da2-8827-4bc6e88b7618%2Ficon-gray.svg';
var onBtnClick = function (t, opts) {
return t.card("url").then(function (card) {
var str = JSON.stringify(card, null, 2);
var parsedURL = JSON.parse(str);
const url = new URL(parsedURL.url);
var shortUrl = "Our custom URL" + url.pathname
updateClipboard(shortUrl); //DOESN'T WORK
return t.popup({
title: "Flock Link",
items: [{
text: "Our custom URL" + url.pathname //WORKS AND SHOWS IN POPUP
}]
});
}).catch(error => console.log(error));
};
function updateClipboard(newClip) {
navigator.clipboard.writeText(newClip).then(function () {
console.log('Success: ' + newClip);
}, function () {
console.log('Failed to copy');
});
} +
window.TrelloPowerUp.initialize({
'card-buttons': function (t, opts) {
return [{
icon: GRAY_ICON,
text: 'Flock Link',
callback: onBtnClick,
condition: 'edit',
backgroundColor: '#263340',
color: '#ffffff'
}, () => {
console.log('reached');
var btn = document.querySelector('.button-link[title="Flock Link"]')
btn.style.backgroundColor = '#263340';
btn.style.color = '#ffffff';
}];
}
});
因此,我尝试删除 t.popup ,而是根据文档使用navigator.clipboard 或 document.execCommand ,但我无法让它工作。
编辑:这是我在 Firefox 控制台中遇到的错误:
Uncaught (in promise) TypeError: 'clipboard-write' (value of 'name' member of PermissionDescriptor) is not a valid value for enumeration PermissionName.
在 Chrome 中我没有收到错误消息,但出现以下消息:
'剪贴板权限状态被拒绝'
根据标志,这绝对不是真的。
第二个问题是尝试更改按钮的颜色 - 这应该非常简单,但我一定是想多了,因为无论如何我都无法获得任何后续功能或其他属性来影响按钮。